前言

《vue 基礎》系列是再次回(hui)爐(lu) vue 記的(de)(de)筆記，除了官網那部分(fen)知識點外，還(huan)會(hui)加入自己的(de)(de)一些理解。（里面會(hui)有(you)部分(fen)和官網相同的(de)(de)文(wen)案(an)，有(you)經驗的(de)(de)同學擇感(gan)興趣(qu)的(de)(de)閱(yue)讀(du)）

動態路由

所謂動態路由，就是以冒號 :xxx 來定義地址某部分的路由，通常是基于 Restful 規(gui)范，比如下面使(shi)用動(dong)態的(de) id 定義(yi)的(de)地址(zhi)：

問題

相信經驗豐富的你一定遇到過這樣的問題：明明地址變了，但組件沒有重新進行“刷新”?

我們可以通過 vue 的生命周期來驗證組件是否會重新渲染：

當我每次(ci)通過 button 觸發 changeRouterUrl 方法(fa)來進(jin)行 id 的累加使得 url 發生變化。但 created 一直沒有執行第二(er)次(ci)。

一個簡單的 gif

那怎么解決的？

解決

我們知道當定義好 Vue.use(Router); 后，我們就能在實例化后的 vue 中，通過 this.$route 路由對象來獲取相關屬性了。

知道這點后，就通過 watch 來監聽 $route 對象即可。

同時也能用 $route 中(zhong)對應(ying)的 to、from 概念對應(ying)上 watch 接受的 newVal、oldVal 兩個變化前后的參數(shu)。

一個簡單的 gif

這樣就能在每次動態路由改動時，通過監聽 $route 來自定(ding)義需要刷(shua)新組件那部分的數據(ju)了。

總結

一個很簡(jian)單的例子，希望能幫到遇到此類問題的同學。

雖(sui)然官方給出了(le)相關例子，但更多類似的(de)問題我們還是能(neng)根據已有的(de) vue 知識儲備(bei)來解決。