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屬性命名

---

 

 

③最後就能夠看到效果了：

---

 

 

【通常在項目中仍是用前兩章編程式路由、動態路由什麼的比較多】

 

以上，完成，加油~~~