[vue.js] vue router -2

이름을 가지는 라우트

---

라우트 뷰를 이동할 경우에 path가 아닌 name으로 이동하는게 스크립트를 작성할 시 더 유용할 수 있습니다.

<router-link :to="{ name: 'Home' }">home</router-link>
<router-link :to="{ name: 'foo' }">foo</router-link>
<router-link :to="{ name: 'bar', params: { id: 123 }}">bar</router-link>

const router = new VueRouter({
  routes: [
   {
        path: '/bar/:id',
        name: 'bar',
        component: () =>
            import( "../views/Bar.vue"),
    }
  ]
})

 

router-link를 통해 name: {이동하고자 하는 route 이름}, params:{route에 선언된 변수} 값으로 route를 이동시킬 수 있습니다. 

 

<h1>This is Bar{{$route.params.id}}</h1>

또한 넘겨준 변수의 값을 사용하여 vue 파일에서 사용할 수 있습니다.

 

 

선언적 방식 이외에도 프로그래밍 네비게이션 방식으로도 동일하게 작동합니다.

 

router.push({ name: 'bar', params: { id: 123 }})

 

 

 

 

이름을 가지는 뷰

---

여러개의 router-view로 각기 다른 router를 노출해야 하는 경우에는 각 router-view에 이름을 할당하면 됩니다. view 형식의 .vue 파일에 하나의 router-view 대신 여러 개의 router-view를 사용하여 각 router-view에 이름을 지정해 보겠습니다. 이름이 없는 router-view는 default가 이름이 됩니다.

 

router.js에 default,a,b로 router-view 이름에 들어가 컴포넌트를 지정해줍니다.

 

{
        path: '/default',
        name: 'default',
        components:{
            default: Home
        }
    },
    {
        path: '/defaultA',
        name: 'defaultA',
        components:{
            default: Home,
            a: Foo
        }
    },
    {
        path: '/defaultAandB',
        name: 'defaultAandB',
        components:{
            default: Home,
            a: Foo,
            b: Bar
        }
    }

 

router-link 태그로 각 path로 갈 방법을 만들어 줍니다.

<router-link :to="{ name: 'default' }">default</router-link> |
<router-link :to="{ name: 'defaultA' }">defaultA</router-link> |
<router-link :to="{ name: 'defaultAandB' }">defaultAandB</router-link>

router-view를 복수개로 선언해주고 각 기본값, 이름 a, 이름 b 로 지정해줍니다.

<router-view />
<router-view name="a"/>
<router-view name="b"/>

 

 

-default 경로로 이동했을때

 

-defaultA 경로로 이동했을때

 

-defaultAandB 경로로 이동했을때