第一次寫vue項目，遇到了很多的問題，都是之前沒有遇到過的，例如這次遇到當使用路由跳轉時，發現頁面數據并沒有刷新，后來看了vue-router的文檔，里面有這么一句話：**提醒一下，當使用路由參數時，例如從 /user/foo 導航到 user/bar，原來的組件實例會被復用。因為兩個路由都渲染同個組件，比起銷毀再創建，復用則顯得更加高效。不過，這也意味著組件的生命周期鉤子不會再被調用。**這句話的意思是，雖然路由參數發生了變化，但是組件被再次復用，頁面沒有變化，數據也沒有刷新。不過，官網也給出了相對應的解決方案：**復用組件時，想對路由參數的變化作出響應的話，你可以簡單地 watch（監測變化） $route 對象：** ~~~ const User = { template: '...', watch: { '$route' (to, from) { // 對路由變化作出響應... } } } ~~~ 今天查資料時，發現了一個比較簡單的解決方案，看vue官網教程的條件渲染時，發現一句很有意思的話：要想兩個元素是完全獨立的，不要復用它們”。只需添加一個具有唯一值的 key 屬性即可（**說明用:key可管理復用元素**），以前認為v-if是動態的生成/去除元素，仔細看例子，會發現：模板相同，會造成一種“復用”的感覺（v-if和v-else的模板是一樣一樣的），也就是說，**數據更新之前，會先比較模板先后的異同，再決定是否跟新數據，并不是先更新數據，再刷新模板**。 解決方法：**key是用來阻止“復用”的。 Vue 為你提供了一種方式來聲明“這兩個元素是完全獨立的——不要復用它們”。只需添加一個具有唯一值的 key 屬性即可(Vue文檔原話)。** ~~~ <router-view :key="key"></router-view> computed: { key() { return this.$route.name !== undefined? this.$route.name +new Date(): this.$route +new Date() } } ~~~