처음 시작하는 Vue.js(2) 뷰 라우터 중첩 라우터부터 네임드 뷰까지

front-end/vue.js

처음 시작하는 Vue.js(2) 뷰 라우터 중첩 라우터부터 네임드 뷰까지

MOOB 2019. 9. 7. 18:54

라우팅

라우팅이란 웹 페이지간의 이동 방법을 말한다. 라우팅은 현대 웹앱 형태 중 하나인 싱글 페이지 에플리케이션에서 주로 사용된다.

싱글 페이지 에플리케이션이란 서버에 웹 페이지를 요청하지 않고, 미리 해당 페이지를 받아 놓고 이동시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴을 적용한 어플리케이션을 말한다.

뷰 뿐만 아니라 리엑트, 엥귤러는 모두 라우팅을 이용한 화면 전환을 지원하고 있으며 Fouc 현상이 일어나지 않아 화면을 더 빠르고 매끄럽게 전환할 수 있다.

Route 예제

<route-link to="url"> : 페이지 이동 태그, 화면에서는 <a> 태그로 치환된다.
<route-view> 페이지 표시 태그, 변경되는 url에 대한 해당 컴포넌트를 뿌려준다.
$mount() : el 속성과 같이 인스턴스를 화면에 붙이는 역할을 한다. 생성하고 나서 $mount()를 붙이면 강제로 인스턴스를 화면에 붙일 수 있다. 뷰 라우터는 el을 사용하지 않고 $mount()를 사용하여 인스턴스를 붙이는 것을 지향하고 있다.

밑의 예제를 실행하면 화면 이동 시 url에 #이 붙게 되는데 이것을 피하고 싶다면 VueRouter에 mode:history를 적용시키면 된다.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="app">
      <router-link to="/main">Link To Main</router-link>
      <router-link to="/login">Link To Login</router-link>
      <!--url 값을 변경하는 태그   -->
      <p>
        <router-view></router-view>
        <!--url 값에 따라 갱신되는 화면 영역-->
      </p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  <script>
  var Main = {template: '<div>Main!</div>'};
  var Login = {template: '<div>login!!!</div>'};
  // Main, Login 컴포넌트 정의
  var routes = [
    {path : '/main', component:Main},
    {path : '/login', component:Login},
  ];
  //각 url에 맞춰서 표시할 컴포넌트 지정
  var router = new VueRouter({
    routes
  });
  // 뷰 라우터 정의
  var app = new Vue({
    router
  }).$mount('#app');
  // 뷰 인스턴스에 라우터 추가
  </script>
  </body>
</html>

네스티드 라우터

네스티드 라우터를 사용하면 페이지를 이동할 때 최소 2개 이상의 컴포넌트를 화면에 나타낼 수 있다.

밑의 예제를 보자

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="app">
        <router-view></router-view>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  <script>
  var User = {
    template:
    `
    <div>
    User Component!!!
    <router-view></router-view>
    </div>
    `
    };
    // 위 <router-view></router-view>에 하위 컴포넌트가 뿌러진다. (위 탬플릿 생성 `` 사용임을 주의)

    var UserProfile = {template: '<p>User Profile!!!</p>' };
    var UserPost = {template: '<p>User Posts!!!</p>' };
    // 하위 컴포넌트의 정의

    var routes = [
      {
        path: '/users',
        component:User,
        children:[
          {
          path: 'posts',
          component:UserPost
        },
        {
        path: 'profile',
        component:UserProfile
      },
        ]
      }
    ];
// 네스티드 라우터의 정의
  var router = new VueRouter({
    routes
  });
  var app = new Vue({
    router
  }).$mount('#app');
  </script>
  </body>
</html>

위 예제에서 화면을 보기 위해서는 중첩 라우터의 최상위 컴포넌트인 /users에 직접 접속해야 한다. 또한 하나의 url path 당 하나의 컴포넌트만을 볼 수 있어 화면 구성에 제약이 생긴다. 이를 해결하기 위해 나온 것이 네임드이다.

네임드 뷰

네임드 뷰는 특정 페이지로 이동했을 때 여러개의 컴포넌트를 동시에 표시하느 라우팅 방식이다. 네스티드 라우터는 상위 컴포넌트가 하위 컴포넌트를 포함하지만, 네임드 뷰는 같은 레벨의 여러개의 컴포넌트를 한번에 표시한다.

[image:EA97E024-C3DE-4E2F-B9FF-4D85B28660CE-5750-0000A4214F67553C/namedview-nestedroutes.png]

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="app">
        <router-view name = "one"></router-view>
        <router-view name = "two"></router-view>
        <router-view></router-view> <!--이름이 없는 경우 default이다.-->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  <script>
    var One = {template: '<p>하나</p>' };
    var Two = {template: '<p>둘!</p>' };
    var Default = {template: '<p>디폴트</p>' };

    var routes = [
      {
        path: '/',
        components:{
          // router view와 name 속성을 연결
          default : Default,
          one:One,
          two:Two
        }
      }
    ];
  var router = new VueRouter({
    routes
  });
  var app = new Vue({
    router
  }).$mount('#app');
  </script>
  </body>
</html>