Vue-- 監聽路由變化，數據沒法更新？

　　以前寫的Vue項目，有個問題困擾了很久。新聞板塊有推薦、精華、最新等幾個Tab，設想經過切換Tab，改變路由參數（get/news/:tab）去獲取對應數據，而後渲染到頁面（用的是同一套組件），問題來了：當切換Tab時，數據並無更新，後來看了Vue-router官網，有這麼一句話：提醒一下，當使用路由參數時，例如從 /user/foo 導航到 user/bar，原來的組件實例會被複用。由於兩個路由都渲染同個組件，比起銷燬再建立，複用則顯得更加高效。不過，這也意味着組件的生命週期鉤子不會再被調用。 意思很明顯了：雖然路由參數發生了變化，但組件仍是那個組件，Vue生命週期也還沒結束，此時並不會刷新數據。（我的認爲，開發spa頁面，一切都是以路由爲起點的，路由變化，頁面跟着變化，複用組件居然會影響到路由，很難受！！）

不過，官網也提出了相應的解決方案：複用組件時，想對路由參數的變化做出響應的話，你能夠簡單地 watch（監測變化） $route 對象：

　　

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 對路由變化做出響應...
    }
  }
}

　　今天，在逛社區的時候，又遇到這個‘’攔路虎‘’以及一個很是新穎的解決方案，相信很多人在看Vue官方文檔的時候，對這句話有過疑問：用 :key管理可複用的元素（這句話出自條件渲染 v-if部分），如何管理，官網也給了演示（我第一次看的時候，好像是沒有的例子的） 這個例子讓我對v-if又有了不一樣的見解：之前認爲v-if是動態的生成/去除元素，仔細看例子，會發現：模板相同，會形成一種「複用」的感受（v-if和v-else的模板是同樣同樣的），也就是說，數據更新以前，會先比較模板前後的異同，再決定是否跟新數據，並非先更新數據，再刷新模板。 對:key的詳細解讀來自知乎：https://www.zhihu.com/question/61064119  

　　上面的思考題其實跟我遇到的問題是一致的，本身進入了一個誤區：Vue是數據驅動的，這句話是絕對沒有問題的，但他不是‘金科玉律’，vue的底層實現應該是：經過比較模板前後的異同，再決定是否跟新數據（我的拙見，輕噴）。

　　回到正題，：key是用來阻止「複用」的。  Vue 爲你提供了一種方式來聲明「這兩個元素是徹底獨立的——不要複用它們」。只需添加一個具備惟一值的 key 屬性便可(Vue文檔原話)

　　那麼，給<router-view></router-view>添加一個key，能不能解決這個問題呢？答案是能夠的（廢話-_-||） 能夠這樣來：

　　

<router-view :key="key"></router-view>

computed: {
    key() {
        return this.$route.name !== undefined? this.$route.name +new Date(): this.$route +new Date()
    }
 }

　　使用computed屬性和Date()能夠保證每一次的key都是不一樣的，這樣就能夠如願刷新數據了。

　　　　對這個問題的研究就先到這裏了，之後遇到新的方案，會繼續補充

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　----2017.06.22  22：53