iview admin 打開多個來源於同組件的詳情頁面，切換時頁面不刷新問題解決方法

作了個後臺管理系統，使用的iview admin框架，在開發列表打開詳情頁面時遇到的問題

• 問題描述
  當打開多個詳情頁以後，在詳情頁面之間切換，頁面數據停留在第一個頁面的數據，

• 相關文檔

  當使用路由參數時，例如從 /user/foo 導航到 /user/bar，原來的組件實例會被複用。由於兩個路由都渲染同個組件，比起銷燬再建立，複用則顯得更加高效。不過，這也意味着組件的生命週期鉤子不會再被調用。
  來源於 Vue Router文檔

• 解決方法：

  瞭解到問題後，我想到一種解決方法，用計算屬性與監聽函數監聽路由變化，觸發頁面數據更新函數，
  試過直接監聽$route，結果會觸發，不過實際應用會報錯，感受應該是$route是全局對象的緣由，
  因此我用了計算屬性將它轉化爲一個動態變量來監聽，
  我的試用正常

• 相關代碼

  computed: {
    // 計算屬性的 getter
    onQuery: function () {
      // `this` 指向 vm 實例
      return this.$route.params
    }
  },
  watch: {
    'onQuery' (old, newValue) {
      // 對路由變化做出響應...
      if (newValue) {
        this.getPageInfo()
      }
    }
  },