前几天在学习大佬的项目,看一下内部的 vue-router 时发现了一些好东西,可能自己有帮助的
重定向(redirect)
redirect 可以是一个字符串,也可以是对象,甚至也可以是一个方法
新增一个路由:将路径 " / " 重定向到 " / home "
字符串形式:
[
{
path: '/',
redirect: '/home'
}
]
对象形式:
重定向的目标可以是一个对象(命名的路由):
[
{
path: '/',
// 需要设置路由名字为 name 的路由
redirect: {
name:'home'
}
}
]
函数形式:(方便携带参数)
[
{
// /updateShop/001 -> /shop?dataId=001
path: '/updateShop/:id',
// to 为跳转路由 '/updateShop/:id' 的对象
redirect: to => {
// return 重定向的字符串路径/路径对象
return { path: '/shop', query: { dataId: to.params.id} }
},
}
]
注意
:redirect (重定向)不需要写 component ,因为只是类似拦截转发而已
应用场景:首次进入页面时会自动跳转到 “/ home” 路径下的路由,防止第一次进入时出现白屏
别名 (alias)
它可以是一个字符串、数组 和 redirect 重定向类似,但是需要注意的是:
别名不会将 URL 路径修改为另外一个名字,但是会跳转到对应命名的路由,简单点说就是将 URL 对应的路由修改而已
注意:
alias 的属性值以 “/” 开头的会被当做为绝对路径,否则都为相对路径
作用:可以自由地将路由映射在某个路由上面
字符串形式:
[
{
// 访问 / => 就是访问 /home , 加载 home 组件
// 实际访问的 URL
path: '/home',
component: home,
// 设置别名,可见假的 URL
alias: '/'
}
]
数组设置多个别名:(它可以在嵌套路由中使用)
// Vue 官网的例子
[
{
// 实际的 URL ,呈现 UserList
path: '/users',
component: UsersLayout,
children: [
// - 三个 URL 访问的实际 URL 为 /user , 呈现 UserList 组件
// - /users/admin
// - /users/list
// - /people (由于 people 以 "/" 开头为绝对路径将"/users"替换)
{ path: '/admin', component: UserList, alias: ['/people', 'list'] },
],
},
]
对于URL 携带参数:
{
path: '/users/:id',
component: UserData,
children: [
// 为这 3 个 URL 呈现 UserDetails
// - /users/24 , 被别名' '标识
// - /users/24/profile 直接访问
// - /24 ,被别名'/:id'标识(直接路径)
{ path: 'profile', component: UserDetails, alias: ['/:id', ''] },
],
},
应用场景:方便展示 404 页面,将不存在的 URL 都设置为404页面的别名,当用户访问到不存在的 URL 时(别名),将会跳转到 404页面的路由
例如:
// 借助通配符
{
path:"/404",
component:'../component/404.vue',
// 将其路径设置为 /:pathMatch(.*)*,表示匹配所有未匹配到的路由到通配符里面
alias:":/pathMatch(.*)*"
}
// 将匹配所有内容并将其放在 `$route.params.pathMatch` 下,等效上面捕获不存在的路由
{ path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
// 将匹配以 `/user-` 开头的所有内容,并将其放在 `$route.params.afterUser` 下
{ path: '/user-:afterUser(.*)', component: UserGeneric },
注意:
捕获不存在的路由操作应该放在底部,由于路由从上到下,写在前面可能会出现错误