Vue.js 뷰 라우터 정리 (4)

1. 뷰 라우터2. 뷰 라우터 실습2.1 뷰 라우터 기초2.2 중첩 라우터 (Nested routes)2.3 네임드 라우터 (Named Routes)2.4 네임드 뷰 (Named View)

1. 뷰 라우터

• 라우팅(Routing) 이란?

  • 원래는 네트워크에서 사용되는 용어로, 어떤 네트워크 안에서 통신 데이터를 보낼 최적의 경로를 선택하는 과정을 뜻함

  • 웹에서의 라우팅

    • 웹 페이지 간의 이동 방법을 뜻함

    • 예시

      1. 브라우저 URL을 입력하면 해당 페이지로 이동
      2. 링크를 클릭하면 해당 페이지로 이동
      3. 뒤로가기를 누르면 히스토리의 이전 페이지로 이동

       

• 뷰 라우터

  • Vue.js의 공식 라우터
  • Vue.js 코어와 긴밀하게 연결되어 SPA를 쉽게 구축 할 수 있음
  • 화면 간의 이동 시, 깜빡거림 없이 매끄럽게 전환

   

• 주요 기능

  • Nested route/view mapping
  • Modular, component-based router configuration
  • Route params, query, wildcards
  • View transition effects powered by Vue.js' transition system
  • Fine-grained navigation control
  • Links with automatic active CSS classes
  • HTML5 history mode or hash mode, with auto-fallback in IE9
  • Customizable Scroll Behavior

 

2. 뷰 라우터 실습

2.1 뷰 라우터 기초

• <router-link to="URL"> 태그

  • 페이지 이동 태그, 화면에서는 <a>로 렌더링되며, 클릭하면 to에 지정한 URL로 이동

• <router-view>

  • 페이지 표시 태그, 변경되는 URL에 따라 해당 컴포넌트를 화면에 그려지는 영역

     

xxxxxxxxxx
<div id="app">
    <p>
        <router-link to="/main">Go to Main</router-link>
        <router-link to="/login">Go to Login</router-link>
    </p>
    <router-view></router-view>
</div>

xxxxxxxxxx
// 1. router-view영역에 그려질 라우트 컴포넌트 정의
var Main = { template: '<div>main 화면 입니다.</div>'};
var Login = { template: '<div>login 화면 입니다.</div>'};
​
// 2. 라우트 정의, 컴포넌트와 라우트(path)를 매핑
var routes = [
    {path: '/main', component: Main},
    {path: '/login', component: Login}
];
​
// 3. VueRouter 인스턴스 생성
var router = new VueRouter({
    routes
});
​
// 4. 뷰 인스턴스 생성, router를 옵션에 추가
new Vue({
    router
}).$mount('#app');
​
// $mount() API는 el 속성과 동일하게 인스턴스를 화면에 붙이는 역할
// 뷰라우터 공식문서에는 뷰 인스턴스 생성 시, el 옵션을 지정하지 않고, 
// 라우터만 지정하여 생성한 다음 생성된 인스턴스를 $mount()를 이용해 붙이는 식으로 안내

 

 

2.2 중첩 라우터 (Nested routes)

• 라우터 컴포넌트 안에 하위에 라우터 컴포넌트를 중첩하여 구성하는 방식

• 실제 앱 UI는 여러 단계로 중첩 된 컴포넌트로 구성

  • 예시) User 라우팅 안에 Profile, Posts 라우팅이 중첩되어있는 구성

  xxxxxxxxxx
  /user/foo/profile                     /user/foo/posts
  +------------------+                  +-----------------+
  | User             |                  | User            |
  | +--------------+ |                  | +-------------+ |
  | | Profile      | |  +------------>  | | Posts       | |
  | |              | |                  | |             | |
  | +--------------+ |                  | +-------------+ |
  +------------------+                  +-----------------+
  

 

xxxxxxxxxx
<div id="app">
    <router-view></router-view>
</div>

xxxxxxxxxx
// User 컴포넌트 안에 router-view 가 포함되어있음, 중첩 라우팅
var User = {
            template: 
                `<div>
                    <h3>User 화면 입니다, Path: {{ $route.params.id }}</h3>
                    <router-view></router-view>
                </div>`
           };
var UserProfile = { template: '<div>User Profile Component</div>'};
var UserPosts = { template: '<div>User Posts Component</div>'};
var NotFound = { template: '<div>User Not Found</div>'};
​
// children 속성에 정의된 라우팅은 상위 라우팅(User)의 router-view 태크에 렌더링 됨
var routes = [
    {path: '/user/:id', component: User,
     children:[
         {
             // /user/:id/profile 과 일치 할 때
             // UserProfile은 User의 <router-view> 내에 렌더링 됨
             path: 'profile',
             component: UserProfile
         },
         {
             // /user/:id/posts 과 일치 할 때
             // UserPosts User의 <router-view> 내에 렌더링 됨
             path: 'posts',
             component: UserPosts
         },
         {
             // 일치하는 path가 없는 경우, NotFound 컴포넌트가 렌더링 됨
             path: '',
             component: NotFound
         }
     ]
    }
];
​
var router = new VueRouter({
    routes
});
​
new Vue({
    router
}).$mount('#app');

 

2.3 네임드 라우터 (Named Routes)

• 라우트를 탐색할 때, 이름을 지정해서 사용하는 것이 더 편리

• routes 에 name 옵션을 지정할 수 있음

  xxxxxxxxxx
  var router = new VueRouter({
    routes: [
      {
        path: '/user/:id',
        name: 'user',
        component: User
      }
    ]
  })
  

• 네임드 라우터에 링크하려면, 태그를 이용하여 전달

  xxxxxxxxxx
  <router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link>
  

  • 해당 링크는 /user/123 으로 이동

     

2.4 네임드 뷰 (Named View)

• 여러 개의 컴포넌트를 동시에 표시하게 하는 라우팅 방식
• 같은 레벨에서 여러 개의 컴포넌트를 한 번에 표시
• 라우터 속성 설정 시, components 옵션 사용

xxxxxxxxxx
<div id="app">
    <router-view name="header"></router-view>
    <router-view></router-view>
    <router-view name="footer"></router-view>
</div>

xxxxxxxxxx
var Body = { template: '<div>Body 영역 입니다.</div>'};
var Header = { template: '<div>Header 영역 입니다.</div>'};
var Footer = { template: '<div>Footer 영역 입니다.</div>'};
​
var router = new VueRouter({
    routes:[
        {
            path: '/',
            components:{
                default: Body,//name을 설정하지 않으면 dafualt 값에 매핑
                header: Header,
                footer: Footer
            }
        }
    ]
});
​
new Vue({
    router
}).$mount('#app');

 

 

[참고]

1. Do it! Vue.js 입문 - 장기효
2. https://router.vuejs.org/