1x3 VueRouter - 基础 - 命名路由 & 命名视图

发布于 2022年 01月 17日 04:49

VueRouter 基础教程系列 🎉

命名路由

使用 name 属性来为路由配置项设置别名。

const routes = [
    {
        name:'user',
        path:'/user/:id',
        component:{template:'<div>{{$route.params.id}}</div>'}
    }
]

“命名路由”的优点主要有以下几点：

  1. 更简短的路由导航地址、尽可能降低拼写错误的机率。
  2. 路径参数 自动编码/解码。
  3. 绕过路径排序（例如只显示一条）。

关于绕过路径排序的个人理解，应该是指命名路由可以基于别名建立映射，从而更高效的进行路径匹配。

现在，我们使用命令式加命名路由的方式来导航到 /user/123 上。

//路径参数自动编码/解码
this.$router.push({name:'user', params:{id:'123'}});

命名视图

命名视图可以在同一级（同一个组件）中展示更多的路由视图，而不是嵌套显示。 命名视图可以让一个组件中具有多个路由渲染出口，这对于一些特定的布局组件非常有用。 命名视图的概念非常类似于“具名插槽”，并且视图的默认名称也是 default。

{
    path:'/layout',
    components:{
        default:Main,
        sideBar:SideBar
    }
}

HTML:

<div id="app">
    <router-view name="sideBar"></router-view>
    <router-view></router-view>
</div>

多个路由渲染出口也代表了有多个组件，所以路由的配置项使用的是新的 components 选项。

导航增强

现在 VueRouter 导航功能不仅可以通过“路径”导航，还可以使用“命名路由”来进行路径的导航。

推荐文章