三、Vue Router 重定向&别名
路由重定向
通过routes
配置来完成,从/a
重定向到/b
;一般用于路由匹配错误时,重定向到404页面或首页。
<script>
// 注意,导航守卫(路由钩子函数)并没有应用在跳转路由上。
const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }, // 重定向到 /b
// 重定向到命名的路由
{ path: '/login', redirect: { name: 'register' }},
// 动态返回重定向目标
{ path: '/a', redirect: to => {
// 方法接收 目标路由作为参数
return '/b'; // 可以是一个字符串,也可以是一个对象
}}
]
});
</script>
别名
别名:可以理解为一个人的艺名或小名,只是换了个叫法。/a
的別名是 /b
,意味着,当前访问/b
时,URL
会保持为/b
, 但路由匹配规则为/a
,就像访问/a
一样。别名的功能让你可以自由的将UI
结构映射到任意的URL
,而不是受限于匹配的嵌套路由结构。
const router = new VueRouter({
routes: [
// 把/b 作为 /a的别名,都会渲染 A 模版
{ path: '/a', component: A, alias: '/b' }
]
});