前面把动态路由、嵌套路由等弄完了，这里搞完命名路由和命名视图，vue-router的基本使用方法就算是完篇了。

vue-router命名路由

①命名路由就是在routers配置路由名称的时候给路由定义不同的名字，这样的好处就是可以在使用

router-link

的

to

属性跳转路由的时候传一个对象从而实现与

router.push

一样的效果：

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

等同于

router.push({ name: 'user', params: { userId: 123 }})

②首先在

router文件夹下

》

index.js

给goods路由命名（之前一直都有命名）。

然后再到

test.vue

页面中，敲：

最后去浏览器看效果

点击最后一行，跳转

命名视图

简单来说就是，给不同的

router-view

定义不同的名字，通过名字进行对应组件的渲染。

例子

①router》》index.js路由页面，把先前写的全部删掉，改成下面：

②然后进入根路由'/'所在的页面，也就是

app.vue

，第一个

router-view

不命名就使用默认的，其它两个

router-view

添加

name

属性命名。

④最后我们就可以看到效果。

------------------------------------------------------------------------------------------------------------

学完vue-router的总结：

顶层vue设置默认界面，默认的router-view路由显示。

index.js设置索引router路径。

分支层vue显示索引跳转的内容。

首页→索引→内容

阅读更多