Vue js 中的動態路由
在文章 使用vue-router完成簡單導航功能 中實現的路由導航功能是不能傳遞引數的,也就是說是靜態路由。
而能傳遞引數的路由模式,由於可以傳遞引數,所以其對應的路由數量是不確定的,故稱之為 動態路由
那麼如何將引數作為路由呢?
在引數名前面加上
:
,然後將引數寫在路由的path
內
如下示例:
routes: [ //將頁面元件與path指令的路由關聯 { name: 'BookInfo', path: '/books/:id', component: BookInfo } ]
- 1
- 2
- 3
- 4
這樣定義之後,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>
- 1
- 2
- 3
- 4
- 5
如果需要傳入多個引數值,只要按照上面的命名方法來加入引數,傳遞在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>
- 1
如果想在js
程式碼中根據引數值做相應的處理,則在預設路由中加入如下程式碼:
export default { name: "app", created() { alert(this.$route.params.id); }};
- 1
- 2
- 3
- 4
- 5
- 6
當使用路由引數的時候,如 從
/books/1
到/books/2
,原來的元件例項會被複用,因為兩個路由都渲染同一個元件,比起銷燬後再建立,複用的銷率會更高。 這也就是說 元件的生命週期鉤子不會再被呼叫(元件沒有被銷燬後再建立) ,即created mounted
等鉤子函式在頁面第二次載入的時候回失效。
那麼,當複用元件時候,想對路由引數的變化做出響應的話,就需要在 $watch
物件內新增對 $route
物件變化的跟蹤函式
<script>export default { name: "app", watch :{ '$route' (to,from){ alert(to.params.id); } }};</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
$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 }
- 1
獲取其中 bookName
的值的程式碼為 this.$route.query.msg
如下程式碼($route.meta.引數名
)
{ name: 'BookInfo', path: '/books/:id', component: BookInfo ,meta: { bookName : 'Lost In River' }}
- 1
獲取其中 bookName
的值的程式碼為 this.$route.meta.bookName