중첩 라우팅

중첩 라우터를 설정할 때는 다음과 같은 방식으로 설정한다.

const routes = [
  {
    path: "/",
    component: {
      template: "<div>this is yes <router-link></router-link></div>"
    },
    children: [
      {
        path: "number1",
        component: {
          template: "<div>this is number1</div>"
        }
      },
      {
        path: "number2",
        component: {
          template: "<div>this is number1</div>"
        }
      }
    ]
  }
];

export default routes;

위와 같이 라우터를 설정했다면, /yes 가 최상위 경로가 되고 children 에 포함되는 경로 i, can 이 하위 경로로 지정된다. 그리고 주의할 점이 최상위 경로가 되는 컴포넌트의 템플릿에는 라우터가 설정된 파일에는 주어진 라우트에 대해 일치하는 컴포넌트를 렌더링하는 함수형 컴포넌트인 <router-view> 가 들어 가야한다. 이는 <router-view>에서 렌더링된 컴포넌트는 자체 <router-view>를 포함 할 수 있는 데 중첩 된 라우트를 위해 컴포넌트를 렌더링하기 위해 필요하다.

 

/*...*/
<v-tabs fixed-tabs>
        <router-link to="/number1">n1</router-link>
        <router-link to="/number2">n2</router-link>
      </v-tabs>
 <router-view></router-view>
/*...*/

 

위와 같이 경로는 해당 라우터의 최상위 경로 ('/')가 먼저오고 그 뒤에 해당 컴포넌트의 경로가 잇다라 오는 형식으로 작성되어야 한다. 예를들어 최상위 경로가 '/yes'라고 작성되어있다고 치면, '/yes/~~~' 와 같은 형식으로 작성해야한다.

 

 

 

 

router.vuejs.org/kr/guide/essentials/nested-routes.html

중첩된 라우트 | Vue Router