FrontEnd/Vue.js

05. 뷰 라우터(Router)

hanseom 2021. 9. 11. 13:23
반응형

1. 뷰 라우터(Router)

  뷰 라우터는 뷰에서 라우팅(웹 페이지 간 이동) 기능을 구현할 수 있도록 지원하는 공식 라이브러리입니다.

태그 설명
<router-link to="URL 값"> 페이지 이동 태그. 화면에서는 <a>로 표시되며 클릭하면 to에 지정한 URL로 이동합니다.
<router-view> 페이지 표시 태그. 변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역입니다. 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Router Sample</title>
  </head>
  <body>
    <div id="app">
      <h1>뷰 라우터 예제</h1>
      <p>
        <!-- 1. URL 값을 변경하는 태그 -->
        <router-link to="/main">Main 컴포넌트로 이동</router-link>
        <router-link to="/login">Login 컴포넌트로 이동</router-link>
      </p>
      <!-- 2. URL 값에 따라 갱신되는 화면 영역 -->
      <router-view></router-view>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
    <script>
      // 3. Main. Login 컴포넌트 내용 정의
      var Main = { template: '<div>main</div>' };
      var Login = { template: '<div>login</div>' };

      // 4. 각 url에 해당하는 컴포넌트 등록
      var routes = [
        { path: '/main', component: Main },
        { path: '/login', component: Login }
      ];

      // 5. 뷰 라우터 정의
      var router = new VueRouter({
        // mode: 'history', // 뷰 라우터 URL의 해시 값(#)을 없애는 속성
        routes
      });

      // 6. 뷰 라우터를 인스턴스에 등록
      var app = new Vue({
        router
      }).$mount('#app');
    </script>
  </body>
</html>

tip) $mount() API : el속성과 동일하게 인스턴스를 화면에 붙이는 역할.

 

(용어) 싱글 페이지 애플리케이션(SPA, Single Page Application) : 페이지를 이동할 때마다 서버에 웹 페이지를 요청하여 새로 갱신하는 것이 아니라 미리 해당 페이지들을 받아 놓고 페이지 이동 시 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴을 적용한 애플리케이션, 화면 간 전환이 매끄러울 뿐만 아니라 사용자 경험을 향상시킨다.

2. 네스티드 라우터(Nested Router)

  라우터로 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있습니다. 상위 컴포넌트 1개에 하위 컴포넌트 1개를 포함하는 구조로 구성합니다. 네스티드 라우터는 화면을 구성하는 컴포넌트의 수가 적을 때는 유용하지만 한 번에 더 많은 컴포넌트를 표시하는 데는 한계가 있습니다. 이 문제를 해결할 수 있는 방안으로 네임드 뷰가 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Nested Router</title>
  </head>
  <body>
    <div id="app">
      <!-- 1. User 컴포넌트가 뿌려질 영역 -->
      <router-view></router-view>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
    <script>
      var User = {
        template: `
          <div>
            User Component
 		    <!-- 2. 하위 컴포넌트가 뿌려질 영역 -->
            <router-view></router-view>
          </div>
        `
      };
      var UserProfile = { template: '<p>User Profile Component</p>' };
      var UserPost = { template: '<p>User Post Component</p>' };

      // 3. 네스티드 라우팅 정의
      var routes = [
        {
          path: '/user',
          component: User,
          children: [
            {
              path: 'posts',
              component: UserPost
            },
            {
              path: 'profile',
              component: UserProfile
            },
          ]
        }
      ];

      // 4. 뷰 라우터 정의
      var router = new VueRouter({
        routes
      });

      // 5. 뷰 인스턴스에 라우터 추가
      var app = new Vue({
        router
      }).$mount('#app');
    </script>
  </body>
</html>

3. 네임드 뷰(Named View)

  특정 페이지로 이동했을 때 여러 개의 컴포넌트를 동시에 표시하는 라우팅 방식입니다. 상위 컴포넌트가 하위 컴포넌트를 포함하는 형식이 아닌 같은 레벨에서 여러 개의 컴포넌트를 한 번에 표시합니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Named View Sample</title>
  </head>
  <body>
    <div id="app">
      <!-- 1. 라우팅 영역 정의 -->
      <router-view name="header"></router-view>
      <router-view></router-view> <!-- name이 없는 경우 default -->
      <router-view name="footer"></router-view>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
    <script>
      // 2. 컴포넌트 내용 정의
      var Body = { template: '<div>This is Body</div>' };
      var Header = { template: '<div>This is Header</div>' };
      var Footer = { template: '<div>This is Footer</div>' };

      var router = new VueRouter({
        routes: [
          {
            path: '/',
            // 3. <router-view>의 name 속성과 컴포넌트 연결
            components: {
              default: Body,
              header: Header,
              footer: Footer
            }
          }
        ]
      })

      var app = new Vue({
        router
      }).$mount('#app');
    </script>
  </body>
</html>
반응형