const routes = [{ path: '/home', redirect: '/' }]
const routes = [{ path: '/home', redirect: { name: 'homepage' } }]
const routes = [
{
// /search/screens -> /search?q=screens
path: '/search/:searchText',
redirect: to => {
return { path: '/search', query: { q: to.params.searchText } }
},
},
{
path: '/search',
// ...
},
]
const routes = [
{
// will always redirect /users/123/posts to /users/123/profile
path: '/users/:id/posts',
redirect: to => {
return 'profile'
},
},
]
alias
옵션으로 지정할 수 있다.
const routes = [
{
path: '/users',
component: UsersLayout,
children: [
{ path: '', component: UserList, alias: ['/people', 'list'] },
],
},
]
위와 같이 별칭을 지정하면
/users, /users/list, /people 모두 /users와 연결된 컴포넌트를 렌더링한다.
매개변수가 있는 경로
경로에 매개변수가 있으면 별칭에도 매개변수를 포함해야 한다.
const routes = [
{
path: '/users/:id',
component: UsersByIdLayout,
children: [
// - /
{ path: 'profile', component: UserDetails, alias: ['/:id', ''] },
],
},
]
위와 같이 별칭 지정 시
/users/24, /users/24/profile, /24 모두 같은 컴포넌트를 렌더링한다.
참고 - Vue Router 공식 문서
https://next.router.vuejs.org/guide/