❤記在前面
——“我讀過很多書,但后來大部分都忘記了,那讀書的意義是什么?”
——“當我還是孩子時,我吃過很多食物,現在已經記不起吃過什么了。但可以肯定的是,它們中的一部分已經長成了我的骨頭和肉,讀書對人的改變也是如此”
講完命名路由和命名視圖,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屬性命名

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

【一般在項目中還是用前兩章編程式路由、動態路由什么的比較多】
以上,完成,加油~~~
