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


 

 

③最后就可以看到效果了:


 

 

【一般在項目中還是用前兩章編程式路由、動態路由什么的比較多】

 

以上,完成,加油~~~

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM