1.首先來說說什么是命名路由?
① 官方文檔的解釋:https://router.vuejs.org/zh/guide/essentials/named-routes.html
就是在routers配置路由名稱的時候給路由定義不同的名字,這樣的好處就是可以在使用router-link
的to
屬性跳轉(zhuǎn)路由的時候傳一個對象從而實現(xiàn)與router.push
一樣的效果:
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
等同于
router.push({ name: 'user', params: { userId: 123 }})
② 好了薪介,具體手上實踐看看到底應(yīng)該怎么做
首先我們還是在router文件夾下
》 index.js
給goods路由命名(其實我們一直都有命名)
然后我們再到test.vue
頁面中伟桅,敲:
這時候我們?nèi)g覽器中點擊敞掘,就發(fā)現(xiàn)用另一種方式實現(xiàn)了和普通路由跳轉(zhuǎn)、編程式路由跳轉(zhuǎn)一樣的效果:
2.再來說說什么是命名視圖
① 官方文檔就說的很好嘛(https://router.vuejs.org/zh/guide/essentials/named-views.html)
簡單來說就是楣铁,給不同的router-view
定義不同的名字玖雁,通過名字進行對應(yīng)組件的渲染。
② ok盖腕,現(xiàn)在我們進入路由頁面赫冬,把先前寫的全部刪掉,以根路由來實踐一下什么叫命名視圖赊堪。我們在根路由下定義了三個組件
③ 然后我們進入根路由'/'所在的頁面面殖,也就是app.vue
,我們第一個router-view
不命名就使用默認的哭廉,其它兩個router-view
添加name
屬性命名
④ 最后我們就可以看到效果
3.ok脊僚,到目前為止vue-router就基本說完,還想仔細探究的同學(xué)可以去官網(wǎng)翻閱遵绰,加深理解辽幌;明天開始我們就開始首頁的制作了,說下組件的運用并把頭部椿访、導(dǎo)航什么的封裝乌企。
ps:今天周一,早上有點犯困成玫,感覺這章寫的不是很通俗易懂加酵,沒辦法沒辦法,哪里錯了歡迎留言指出來一下哭当;然后就是這章內(nèi)容其實我個人覺得有點雞肋猪腕,食之無味棄之可惜,一般在項目中還是用前兩章編程式路由钦勘、動態(tài)路由什么的比較多陋葡,但是既然vue提供了這種操作肯定有它的道理,所以還是說一下彻采。困了困了腐缤。捌归。。
作者:Ewall_
鏈接:http://www.reibang.com/p/004b73f3f589
來源:簡書
簡書著作權(quán)歸作者所有岭粤,任何形式的轉(zhuǎn)載都請聯(lián)系作者獲得授權(quán)并注明出處惜索。