1x4 VueRouter - 基础 - 重定向 & 路径别名

VueRouter 基础教程系列 🎉

重定向

重定向功能 需要在路由 routes 配置项中进行定义。 重定向的目标可以是一个路径，也可是一个命名路由或者别名。

const routes = [
    {
        name:'user',
        path:'/user/:id',
        redirect:'/user/profile',
    },
    {
        path:'/home',
        redirect:{name:'user', params:{id:'123456'}}
    }
]

redirect 属性也可以是一个方法，用来动态创建重定向的目标地址。

const routes = [
    {
        path:'/home',
        redirect:from => {
            return {name:'user', params:{id:'123'}, query:{q:from.query.q}};
        }
    }
]

from 保存的是源地址的 $route 信息，即 /home 的路由信息。

路由的导航守卫只会作用于目标路由上，并不会应用到重定向路由上。

在写 redirect 的时候，可以省略 component 配置项，因为它从来没有被直接访问过，所以也没有组件要渲染。唯一的例外是嵌套路由，如果一个路由记录同时有 children 和 redirect 属性，它也应该有 component 属性。

虽然嵌套路由的父路由是重定向状态，但是其子路由依然是可以被正常访问，所以必须要定义 component 属性。

路径别名

使用 alias 属性可以为路由配置项的 path 属性设置别名。

const routes = [
    {
        alias: '/profile',
        path: '/user/profile',
        component: { template: 'profile' }
    }
];

这个时候，通过别名 /profile 就相当于访问了 /user/profile 页面。

通过别名访问，浏览器地址栏中展示也是路径别名而非实际的路由 path 地址。

alias 属性的取值还可以是一个数组，来为一个路径定义多个别名，并且它们都关联着同一个渲染组件。

{
      path: '/user/profile',
      alias:['/profile', '/user-profile']
}

如果路径中带有“路径参数”，那么别名也需要对应的设置。

{
    path:'/user/:id/profile',
    alias:"/profile/:id",
    component:{template:"<div>{{$route.params.id}}</div>"}
}

“别名” 的优点体现在可以更灵活的将 UI 结构映射到一个任意的 URL 上，而不受路由配置的嵌套结构限制，抹平了路由的嵌套层级限制（虽然“命名路由”也能做到，但是浏览器地址栏中的地址依然是真实的 path ）。

路由导航增强

随着不断学习，现在我们对 VueRouter 的认知也在不断加深，稍微梳理下，路由的导航方式有：

• 声明式：<router-link to="...">
• 命令式：this.$router.push() | this.$router.replace

而导航的目标不仅可以是具体的地址路径、命名路由还可以是一个路径别名。