在文章 使用vue-router完成簡單導航功能 中實現的路由導航功能是不能傳遞參數的,也就是說是靜態路由。
而能傳遞參數的路由模式,由於可以傳遞參數,所以其對應的路由數量是不確定的,故稱之爲 動態路由
那麼如何將參數作爲路由呢?
在參數名前面加上
:
,然後將參數寫在路由的path
內
如下示例:
routes: [
//將頁面組件與path指令的路由關聯
{ name: 'BookInfo', path: '/books/:id', component: BookInfo }
]
這樣定義之後,vue-router
就會匹配所有的:/books/1,/books/2,/books/3 ……
,所以說這樣定義的路由的數量是不確定的。
在<router-link>
我們加入一個 params
屬性來指定具體的參數值
<li>
<router-link :to ="{name:'BookInfo',params :{id:1}}" >
<div>首頁</div>
</router-link>
</li>
上面的鏈接對應就爲:http://localhost:8080/__dirname/books/1
如果需要傳入多個參數值,只要按照上面的命名方法來加入參數,傳遞在params中對應的聲明參數值即可,vue-router只要匹配到路由模式的定義就會自動對參數進行分解取值
如path: '/books/version/:id'
,則對應params
爲:params :{id:1,version:1}
那麼現在就面臨這一個問題 —— 如何從路由中將這個參數值讀取出來呢?
答:通過 $route.params
這個屬性獲取指定的參數值,如:this.$route.params.id
,this.$route.params.msg
如果希望在相應的組件頁面內輸出參數值,對應代碼如下:
<p>當前圖書編號是:{{$route.params.id}}</p>
如果想在js
代碼中根據參數值做相應的處理,則在默認路由中加入如下代碼:
export default {
name: "app",
created() {
alert(this.$route.params.id);
}
};
當使用路由參數的時候,如 從
/books/1
到/books/2
,原來的組件實例會被複用,因爲兩個路由都渲染同一個組件,比起銷燬後再創建,複用的銷率會更高。
這也就是說 組件的生命週期鉤子不會再被調用(組件沒有被銷燬後再創建) ,即created mounted
等鉤子函數在頁面第二次加載的時候回失效。
那麼,當複用組件時候,想對路由參數的變化做出響應的話,就需要在 $watch
對象內添加對 $route
對象變化的跟蹤函數
<script>
export default {
name: "app",
watch :{
'$route' (to,from){
alert(to.params.id);
}
}
};
</script>
$route.params
定義的參數必然是整個路由的其中一部分,vue-router
還可以讓我們使用"/path?param = value"
的方式傳遞參數,可以使用$route.query.參數名
獲取參數值
vue-router
還提供一種常量參數定義meta
,我們可以在路由定義中先定義meta
的值,然後在路由實例中通過$route.meta
參數獲取具體常量值。
如下代碼($route.query.參數名
)
{ name: 'BookInfo', path: '/books/:id/?bookName=Lost', component: BookInfo }
獲取其中 bookName
的值的代碼爲 this.$route.query.msg
如下代碼($route.meta.參數名
)
{ name: 'BookInfo', path: '/books/:id', component: BookInfo ,meta: { bookName : 'Lost In River' }}
獲取其中 bookName
的值的代碼爲 this.$route.meta.bookName