講解vue-router之命名路由和命名視圖
前言：前面我們把動(dòng)態(tài)路由、嵌套路由等講完了，說道完命名路由和命名視圖，vue-router的基本使用方法就算是完篇了，還想仔細(xì)探究的同學(xué)可以去官網(wǎng)翻閱，加深理解。
1.首先來說說什么是命名路由？
① 官方文檔的解釋：https://router.vuejs.org/zh/guide/essentials/named-routes.html
就是在routers配置路由名稱的時(shí)候給路由定義不同的名字，這樣的好處就是可以在使用router-link的to屬性跳轉(zhuǎn)路由的時(shí)候傳一個(gè)對象從而實(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
這時(shí)候我們?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í)踐一下什么叫命名視圖。我們在根路由下定義了三個(gè)組件
router.png
③ 然后我們進(jìn)入根路由'/'所在的頁面，也就是app.vue，我們第一個(gè)router-view不命名就使用默認(rèn)的，其它兩個(gè)router-view添加name屬性命名
App.vue
④ 最后我們就可以看到效果
localhost
3.ok，到目前為止vue-router就基本說完，還想仔細(xì)探究的同學(xué)可以去官網(wǎng)翻閱，加深理解；明天開始我們就開始首頁的制作了，說下組件的運(yùn)用并把頭部、導(dǎo)航什么的封裝。
ps：今天周一，早上有點(diǎn)犯困，感覺這章寫的不是很通俗易懂，沒辦法沒辦法，哪里錯(cuò)了歡迎留言指出來一下；然后就是這章內(nèi)容其實(shí)我個(gè)人覺得有點(diǎn)雞肋，食之無味棄之可惜，一般在項(xiàng)目中還是用前兩章編程式路由、動(dòng)態(tài)路由什么的比較多，但是既然vue提供了這種操作肯定有它的道理，所以還是說一下。困了困了。。。
參考學(xué)習(xí)
https://router.vuejs.org/zh/
http://www.dbjr.com.cn/article/141023.htm
http://www.dbjr.com.cn/article/141020.htm
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
詳解Vue里循環(huán)form表單項(xiàng)實(shí)例
本文主要介紹了Vue里循環(huán)form表單項(xiàng)實(shí)例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue中如何使用echarts和echarts-gl實(shí)現(xiàn)3D餅圖環(huán)形餅圖
現(xiàn)在vue是很多公司前端的主流框架,我目前所在公司接觸的項(xiàng)目也都是使用vue來實(shí)現(xiàn)的,很少有完全使用原生的JavaScript來寫項(xiàng)目的了,下面這篇文章主要給大家介紹了關(guān)于vue中如何使用echarts和echarts-gl實(shí)現(xiàn)3D餅圖環(huán)形餅圖的相關(guān)資料,需要的朋友可以參考下2023-03-03
vite項(xiàng)目無法使用zangodb包裝器的解決方案
vite作為新一代工具鏈,具有很多便利之處,配置也非常簡單,它很好地整合了Rollup和其他復(fù)雜的構(gòu)建項(xiàng),并提供了多種方向的典型腳手架模板,深受大家喜愛,本文給大家介紹了如何解決vite項(xiàng)目無法使用zangodb包裝器的問題,需要的朋友可以參考下2023-10-10
vue2.x中的provide和inject用法小結(jié)
這篇文章主要介紹了vue2.x中的provide和inject用法小結(jié),本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
前端vue如何通過URL訪問存儲(chǔ)在服務(wù)器或磁盤的圖片
在Vue中,通常需要將圖片存儲(chǔ)在服務(wù)器端,并通過url地址來訪問,下面這篇文章主要給大家介紹了前端vue如何通過URL訪問存儲(chǔ)在服務(wù)器或磁盤的圖片的相關(guān)資料,需要的朋友可以參考下2024-02-02
vue項(xiàng)目中如何實(shí)現(xiàn)網(wǎng)頁的截圖功能?(html2canvas)
這篇文章主要介紹了vue項(xiàng)目中如何實(shí)現(xiàn)網(wǎng)頁的截圖功能?(html2canvas)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
vue中多個(gè)倒計(jì)時(shí)實(shí)現(xiàn)代碼實(shí)例
這篇文章主要介紹了vue中多個(gè)倒計(jì)時(shí)實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Vue+ElementUI實(shí)現(xiàn)動(dòng)態(tài)更換任意主題色(動(dòng)態(tài)換膚)的全過程
眾所周知Element-UI有換膚功能,下面這篇文章主要給大家介紹了關(guān)于Vue+ElementUI實(shí)現(xiàn)動(dòng)態(tài)更換任意主題色(動(dòng)態(tài)換膚)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
在本篇文章里小編給各位分享的是關(guān)于Vue發(fā)布項(xiàng)目的實(shí)例內(nèi)容以及知識(shí)點(diǎn)講解，需要的朋友們參考下。2019-07-07
vue路由傳參的使用場景一般都是應(yīng)用在父路由跳轉(zhuǎn)到子路由時(shí),攜帶參數(shù)跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于Vue3路由傳參方法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04