[Vue.js]vue-router-リダイレクトと別名
7183 ワード
1.リダイレクト
基本
/users、/user/list、および/peopleは、/usersに関連付けられた構成部品をレンダリングします.
パラメータが存在するパス
パスにパラメータがある場合は、別名にもパラメータが含まれます.
/user/24、/user/24/profileおよび/24は、同じ構成要素を示します.
注-Vue Router公式ドキュメント
https://next.router.vuejs.org/guide/
基本
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/
Reference
この問題について([Vue.js]vue-router-リダイレクトと別名), 我々は、より多くの情報をここで見つけました https://velog.io/@yeyo0x0/Vue.js-vue-router-리디렉션-및-별칭テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol