[Vue.js] 네스티 라우터란?

91cm 2019. 1. 20. 23:57

네스티 라우터, 네임드 뷰는 여러개의 컴포넌트를 동시에 표시 할 수 있는 라우터이다.

네스티 라우터란?

라우터로 페이지이동을 할때 최소 2개이상의 컴포넌트를 화면에 나타내는 기능

-구조는 상위컴포넌트 1개에 하위컴포넌트 1개를 포함하는 구조

예를 들어

localhost:8080/user //user가 상위

localhost:8080/user/detail //detail은 하위

localhost:8080/user/create //create도 하위

이런식으로 접근이 가능함.

-기본 라우터와 네스티라우터의 차이점은 최상위 컴포넌트에도 <router-view>가 있고, 최상위 컴포넌트의 하위 컴포넌트에도

<router-view>가 있다는 것.

예제

30행, 34행의 path=url에 따라 해당 컴포넌트를 보여지게 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <!--vue  -->
    <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>
    <title>네스티 라우터</title>
  </head>
  <body>
    <div id="app1">
        <!-- User컴포넌트가 뿌려질 영영역 -->
        <router-view></router-view>
    </div>
 
    <script>
      var User ={
                  template :'<div> User Component <router-view></router-view> </div>'
               };
               
      var UserPorfile = {template:'<p>User Profile Component</p>'};
      var UserPost = {template:'<p>User Post Component</p>'};
 
      // 네스티 라우터 정의
      var routes = [{
                  path: '/user',   //ex url : ~~~/user
                  component: User,
                  children:[
                  {
                    path: 'posts', //ex url : ~~~/user/posts
                    component: UserPost
                  },
                  {
                    path: 'profile', //ex url : ~~~/user/profile
                    component : UserPorfile
                  }
                ]
      }];
 
      //라우터 생성
      var router = new VueRouter({
        routes
      });
 
      var app = new Vue({
        router
      }).$mount('#app1');
 
    </script>
 
  </body>
</html>
 
Colored by Color Scripter
cs

결과화면

url에

/user

/user/posts

/user/profile

을 쳐보면 해당 컴포넌트가 보여지게 된다.