Vue-router 리다이렉트와 별칭

리다이렉트와 별칭

리다이렉트(redirect)

리다이렉트는 사용자가 /a를 방문했을 때 url을 /b로 대체 된 다음 /b로 매칭되는 것이다.
리디렉션은 routes 설정에서 할 수 있다. /a에서 /b로 리디렉션하려면 :

1. 일반적인 redirect(path)

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

2. route name을 이용한 redirect

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

3. 동적 리디렉션을 위한 Function을 이용한 redirect, path를 return

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

별칭(alias)

별칭은 url을 다르게 표시하는 것이다.
예를 들어,/a의 별칭은 /b일 경우
사용자가 /b를 방문했을 때 url은 /b을 유지하지만 사용자가 /a를 방문한 것처럼 매칭한다.

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

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

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