6.vue-router之命名路由和命名視圖

6.vue-router之命名路由和命名視圖

106 人贊了文章

前言：前面我們把動態路由、嵌套路由等講完了，說道完命名路由和命名視圖，vue-router的基本使用方法就算是完篇了，還想仔細探究的同學可以去官網翻閱，加深理解。

GitHub：https://github.com/Ewall1106/mall

1.首先來說說什麼是命名路由？

① 官方文檔的解釋：https://router.vuejs.org/zh/guide/essentials/named-routes.html

就是在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頁面中，敲：

這時候我們去瀏覽器中點擊，就發現用另一種方式實現了和普通路由跳轉、編程式路由跳轉一樣的效果：

2.再來說說什麼是命名視圖

① 官方文檔就說的很好嘛（https://router.vuejs.org/zh/guide/essentials/named-views.html）

簡單來說就是，給不同的router-view定義不同的名字，通過名字進行對應組件的渲染。

② ok，現在我們進入路由頁面，把先前寫的全部刪掉，以根路由來實踐一下什麼叫命名視圖。我們在根路由下定義了三個組件

③ 然後我們進入根路由/所在的頁面，也就是app.vue，我們第一個router-view不命名就使用默認的，其它兩個router-view添加name屬性命名

④ 最後我們就可以看到效果

3.ok，到目前為止vue-router就基本說完，還想仔細探究的同學可以去官網翻閱，加深理解；明天開始我們就開始首頁的製作了，說下組件的運用並把頭部、導航什麼的封裝。

ps：然後就是這章內容其實我個人覺得有點雞肋，食之無味棄之可惜，一般在項目中還是用前兩章編程式路由、動態路由什麼的比較多，但是既然vue提供了這種操作肯定有它的道理，所以還是說一下。

作者：Ewall_

鏈接：https://www.jianshu.com/p/004b73f3f589

來源：簡書

簡書著作權歸作者所有，任何形式的轉載都請聯繫作者獲得授權並註明出處。

作者：Ewall_

鏈接：https://www.jianshu.com/p/004b73f3f589

來源：簡書

簡書著作權歸作者所有，任何形式的轉載都請聯繫作者獲得授權並註明出處。

推薦閱讀：