[Vue.js]vue-router-リダイレクトと別名


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、/user/list、および/peopleは、/usersに関連付けられた構成部品をレンダリングします.
パラメータが存在するパス
パスにパラメータがある場合は、別名にもパラメータが含まれます.
const routes = [
  {
    path: '/users/:id',
    component: UsersByIdLayout,
    children: [
      // - /
      { path: 'profile', component: UserDetails, alias: ['/:id', ''] },
    ],
  },
]
上記のように別名を指定した場合
/user/24、/user/24/profileおよび/24は、同じ構成要素を示します.
注-Vue Router公式ドキュメント
https://next.router.vuejs.org/guide/