vue-router基础知识点三

最新推荐文章于 2024-05-02 14:00:48 发布

doctor文

最新推荐文章于 2024-05-02 14:00:48 发布

阅读量218

点赞数

分类专栏： Vue 文章标签： vue vue.js 前端

原文链接：https://router.vuejs.org/zh/guide/essentials/named-views.html#%E5%B5%8C%E5%A5%97%E5%91%BD%E5%90%8D%E8%A7%86%E5%9B%BE

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、命名路由

命名路由，就是使用name属性来进行路由导航，而不再是使用path路径属性。
在router.js中的路由定义写法就需要添加name属性来进行指定

{path:"/program", name:"program", component:program}

因为在router.js文件中添加了那么属性，此时就能够在模块中用name来调用属性，而不是使用path

this.$router.push({name: "program", params: {userId: "123"}})

同时，在上篇文章有说过。想传递路由参数，可以使用query或者params属性。但是如果用path属性来进行路由导航，params最终会传递一个null值过去。想要正确的使用params作为路由参数，可以使用name属性来进行路由导航。

二、命名视图

在布局中最基础的就是一个布局一个视图，想要在一个布局中体现出多个视图可以用命名视图来完成。
基础router.js代码如下：

{path: '/',components: {default: Foo,a: Bar,b: Baz}}

布局代码如下

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

在此命名视图也是使用name属性进行导航，不过此时布局代码块的name属性对应的是router.js中components属性中的字段名。

如果router-view的name属性名字，那么将会自动引入default模块。

当然也可以结合嵌套路由来使用命名视图以下是结合嵌套路由的router.js代码块：

 {path:"/View",component:View,children: 
            [   {path: 'view1',components:{
                    default: a,
                    A:b,
                    B:c
                }},
                {path: 'view2',components:{
                    default: c,
                    A:a,
                    B:b
                }},
            ] 
        }