講解vue-router之命名路由和命名視圖
前言：前面我們把動態(tài)路由、嵌套路由等講完了，說道完命名路由和命名視圖，vue-router的基本使用方法就算是完篇了，還想仔細(xì)探究的同學(xué)可以去官網(wǎng)翻閱，加深理解。
1.首先來說說什么是命名路由？
① 官方文檔的解釋：https://router.vuejs.org/zh/guide/essentials/named-routes.html
就是在routers配置路由名稱的時候給路由定義不同的名字，這樣的好處就是可以在使用router-link的to屬性跳轉(zhuǎn)路由的時候傳一個對象從而實(shí)現(xiàn)與router.push一樣的效果：
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
等同于
router.push({ name: 'user', params: { userId: 123 }})
② 好了，具體手上實(shí)踐看看到底應(yīng)該怎么做
首先我們還是在router文件夾下 》 index.js 給goods路由命名（其實(shí)我們一直都有命名）
name屬性命名
然后我們再到test.vue頁面中，敲：
test.vue
這時候我們?nèi)g覽器中點(diǎn)擊，就發(fā)現(xiàn)用另一種方式實(shí)現(xiàn)了和普通路由跳轉(zhuǎn)、編程式路由跳轉(zhuǎn)一樣的效果：
localhost
跳轉(zhuǎn)
2.再來說說什么是命名視圖
① 官方文檔就說的很好嘛（https://router.vuejs.org/zh/guide/essentials/named-views.html）
簡單來說就是，給不同的router-view定義不同的名字，通過名字進(jìn)行對應(yīng)組件的渲染。
② ok，現(xiàn)在我們進(jìn)入路由頁面，把先前寫的全部刪掉，以根路由來實(shí)踐一下什么叫命名視圖。我們在根路由下定義了三個組件
router.png
③ 然后我們進(jìn)入根路由'/'所在的頁面，也就是app.vue，我們第一個router-view不命名就使用默認(rèn)的，其它兩個router-view添加name屬性命名
App.vue
④ 最后我們就可以看到效果
localhost
3.ok，到目前為止vue-router就基本說完，還想仔細(xì)探究的同學(xué)可以去官網(wǎng)翻閱，加深理解；明天開始我們就開始首頁的制作了，說下組件的運(yùn)用并把頭部、導(dǎo)航什么的封裝。
ps：今天周一，早上有點(diǎn)犯困，感覺這章寫的不是很通俗易懂，沒辦法沒辦法，哪里錯了歡迎留言指出來一下；然后就是這章內(nèi)容其實(shí)我個人覺得有點(diǎn)雞肋，食之無味棄之可惜，一般在項(xiàng)目中還是用前兩章編程式路由、動態(tài)路由什么的比較多，但是既然vue提供了這種操作肯定有它的道理，所以還是說一下。困了困了。。。
參考學(xué)習(xí)
https://router.vuejs.org/zh/
http://www.dhdzp.com/article/141023.htm
http://www.dhdzp.com/article/141020.htm
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue中在vuex的actions中請求數(shù)據(jù)實(shí)例
今天小編就為大家分享一篇vue中在vuex的actions中請求數(shù)據(jù)實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Nuxt.js結(jié)合Serverless構(gòu)建無服務(wù)器應(yīng)用
Nuxt.js是一個基于Vue.js的框架,結(jié)合Serverless架構(gòu),Nuxt.js可以讓你構(gòu)建高度可擴(kuò)展、成本效益高的無服務(wù)器應(yīng)用,具有一定的參考價值,感興趣的可以了解一下2024-08-08
這篇文章主要介紹了Vue 組件注冊全解析的相關(guān)資料，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
vue如何實(shí)現(xiàn)pc和移動端布局詳細(xì)代碼
這篇文章主要給大家介紹了關(guān)于vue如何實(shí)現(xiàn)pc和移動端布局的相關(guān)資料, Vue響應(yīng)式布局適配是一種根據(jù)設(shè)備特性自動調(diào)整布局的方法,文中通過代碼以及圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
這篇文章主要介紹了幾分鐘弄懂Vuex的五大屬性和使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
詳解Vue3.0 + TypeScript + Vite初體驗(yàn)
這篇文章主要介紹了詳解Vue3.0 + TypeScript + Vite初體驗(yàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
最近的數(shù)據(jù)統(tǒng)計(jì)項(xiàng)目中要用到中國地圖，也就是在地圖上動態(tài)的顯示某個時間段某個省份地區(qū)的統(tǒng)計(jì)數(shù)據(jù)，我們不需要flash，僅僅依靠raphael.js以及SVG圖像就可以完成地圖的交互操作。本文就給大家介紹了關(guān)于利用vue集成raphael.js中國地圖的相關(guān)資料，需要的朋友可以參考下。2017-08-08
Vue讓router-view默認(rèn)顯示頁面操作方法
一個home頁面,點(diǎn)擊左邊的菜單欄,右邊顯示頁面,因此都知道在右邊放一個router-view然后配置路由即可,然而問題出現(xiàn)在：重新打開的時候,默認(rèn)是白色空的,遇到這樣的問題如何解決呢,下面小編給大家分享Vue讓router-view默認(rèn)顯示頁面操作方法,感興趣的朋友一起看看吧2024-03-03
layer.js(mobile)是一個小巧方便的彈出層插件，在之前的apicloud項(xiàng)目中被大量使用，但最近對apicloud的IDE、非常不友好的文檔和極低的開發(fā)效率深感厭煩，決定棄用然后轉(zhuǎn)向Vue開發(fā)。這篇文章主要介紹了vue-cli腳手架引入彈出層layer插件的幾種方法，需要的朋友可以參考下2019-06-06
vue中利用mqtt服務(wù)端實(shí)現(xiàn)即時通訊的步驟記錄
前些日子了解到mqtt這樣一個協(xié)議,可以在web上達(dá)到即時通訊的效果,所以下面這篇文章主要給大家介紹了關(guān)于vue中如何利用mqtt服務(wù)端實(shí)現(xiàn)即時通訊的相關(guān)資料,需要的朋友可以參考下2021-07-07