[Vue.js] vue-router #6 - 리다이렉트와 별칭

본 포스팅은, 뷰 라우터 공식 문서(https://router.vuejs.org/kr/guide/essentials/history-mode.html)와
'캡틴판교의 Cracking Vue.js' 내용에 기반하여 작성된 포스팅입니다.
자세한 내용은 공식 문서와 '캡틴판교의 Cracking Vue.js'를 참조해주세요!

1. 리다이렉트

리디렉션은 routes 설정에서도 할 수 있다. /a에서 /b로 리다이렉션하려면 이렇게 하면 된다.

const router = new VueRouter({
 routes: [
   { path: '/a', redirect: '/b' }
 ]
})

리디렉션은 이름이 지정된 라우트를 지정할 수도 있다.

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

또는 동적 리디렉션을 위한 함수를 사용할 수도 있다.

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: to => {
      // 함수는 인수로 대상 라우트를 받습니다.
      // 여기서 path/location 반환합니다.
    }}
  ]
})

기타 활용 방법

// redirect with params
{ path: '/redirect-with-params/:id', redirect: '/with-params/:id' },

// redirect with caseSensitive
{ path: '/foobar', component: Foobar, caseSensitive: true },

// redirect with pathToRegexpOptions
{ path: '/FooBar', component: FooBar, pathToRegexpOptions: { sensitive: true }},

// catch all redirect
{ path: '*', redirect: '/' }

출처 (https://github.com/vuejs/vue-router/blob/dev/examples/redirect/app.js)

2. 별칭

리다이렉트는 사용자가 /a를 방문했을 때 URL이 /b로 대체된 다음 /b로 매칭된다는 것을 의미한다.


하지만, 별칭은 /a의 별칭으로 /b를 설정하면 사용자가 /b를 방문했을 때 URL은 /b를 유지하지만, 사용자가 /a를 방문한 것처럼 매칭된다.

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

별칭을 사용하면 구성의 중첩 구조에 의해 제약을 받는 대신 UI 구조를 임의의 URL에 매핑할 수 있다.