[Vue.js] nested router 구현

Vue에서 router 주소를 /login/type 등등으로 이어서 사용하고자 할때가 있다.

그럴때는 nested router 를 사용한다.

nested router는 router 기능 중 children을 사용하는 것으로 써,

주소로 표현하고자 하는 최상단 컴포넌트는 반드시  <router-view></router-view>를 가지고 있어야 보여줄 수 있다.

index는 최대한 간단하게 <router-view> 만 써주는 게 좋다.(다른 코드있으면, 그 코드까지 랜더링된다)

Index.vue

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

router.js에서 아래와 같이 작성을 한다.

//router.js

{
 path: '/login',
 name: '',
 component: () => import(/* webpackChunkName: "" */ '../components/views/Index.vue'),  //최상위 컴포넌트
 children: [
   {
     path: '/',
     name: 'login',
     component: () => import(/* webpackChunkName: "login" */ '../components/views/login/LoginView.vue'),
   },
   {
     path: 'type',
     name: 'login-type',
     component: () => import(/* webpackChunkName: "login-type" */ '../components/views/login/LoginTypeView.vue'),
   },
 }     

기본 메인페이지를 url 지정을 해주고, children path를 "/" 로 설정해준다.

그리고 하위컴포넌트를 명시해주고, 해당 페이지를 이동시키는 router-link나 this.$router.push의 경로를

아래 이동하고자 하는 경로로 맞춰주면 된다.

<router-link to="/login/type">

or

this.$router.push("/login/type");