vue-router之命名路由和命名视图

 

❤记在前面

——“我读过不少书，但后来大部分都忘记了，那读书的意义是什么？”

——“当我仍是孩子时，我吃过不少食物，如今已经记不起吃过什么了。但能够确定的是，它们中的一部分已经长成了个人骨头和肉，读书对人的改变也是如此”

 

讲完命名路由和命名视图，vue-router的基本使用方法就算是完篇了

 

一 什么是命名路由

1.官方文档：https://router.vuejs.org/zh/guide/essentials/named-routes.html

就是在routers配置路由名称的时候给路由定义不一样的名字，这样作的好处就是能够在使用router-link的to属性跳转路由的时候传一个对象从而实现与router.push同样的效果：

等同于

       

 

2.具体上手实践：首先仍是在router->index.js下给goods路由命名（其实以前就一直有命名的）

---

 

 

②而后，在test.vue页面中输入：

---

 

 

③这时候再去浏览器中点击，会发现用另外一种方式实现了和普通路由跳转、编程式路由跳转同样的效果：

---

 

④点击跳转：

 

二 什么是命名视图？

1.官方文档：https://router.vuejs.org/zh/guide/essentials/named-views.html

简单的说就是，给不一样的router-view定义不一样的名字，经过名字进行对应组件的渲染

 

2.如今，进入路由页面，把先前写的所有删掉，以根路由来实践一下什么叫命名视图：

①在根路由下定义三个组件：

---

 

 

 

 ②而后进入根路由 ‘ / ’ 所在的页面，也就是app.vue，第一个router-view不命名就使用默认的，其余两个router-view添加name属性命名

---

 

 

③最后就能够看到效果了：

---

 

 

【通常在项目中仍是用前两章编程式路由、动态路由什么的比较多】

 

以上，完成，加油~~~