Vue Router 重定向&别名

Posted 2020-11-26 yuxi2018

路由重定向

通过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' }
    ] 
});