[Vue.js] vue-router - 리디렉션 및 별칭

☁️ yeyo·2022년 1월 16일
0

vue-router

목록 보기
5/5
post-thumbnail

1. 리디렉션

기본

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'
    },
  },
]

2. 별칭

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/

profile
🐋 https://ye-yo.github.io/ 로 블로그 이전했습니다

0개의 댓글