問題描述：vue-router導航切換 時，如果兩個路由都渲染同個元件，元件會重（chong）用,元件的生命週期鉤子不會再被呼叫,使得元件的一些資料無法根據 path的改變得到更新

****************************************************************************************************************************

翻車現場再現：

這是我的/router/index.js  的內容節選

export default new Router({
  routes: [
    {
      path: '/main',
      component: Main
    },
    {
      path: '/get',
      component: Main
    }
  ]
})
 

這是我的 Main.vue的內容節選

<p>{{$router.currentRoute.path}}</p>

以上情景很明顯 ，我是想要顯示路由跳轉前和路由跳轉後的 path值

路由從 /main  跳轉到了 /get  ，理想情況是 網頁中顯示的路由從  /main 變成了  /get 

但事實是網頁沒有一點變化  ,顯示的內容依然是 /main

****************************************************************************************************************************

 車禍原因分析

從我的車況來看，  我的這次路由跳轉前後使用了完全相同的元件 ，通過仔細檢視vue-router文件對應位置 ，發現瞭如下關鍵內容

當使用路由引數時，例如從 /user/foo 導航到 /user/bar，原來的元件例項會被複用。因為兩個路由都渲染同個元件，比起銷燬再建立，複用則顯得更加高效。不過，這也意味著元件的生命週期鉤子不會再被呼叫。

route object 是 immutable（不可變） 的，每次成功的導航後都會產生一個新的物件。

這兩個關鍵的資訊 表明，正常元件不復用時，元件內的 route物件是最新路由 對應的， 但是元件複用時，由於元件的生命週期鉤子不會再被呼叫，元件內的route物件還是原來的，不會得到更新，所以出現了頁面的path 資訊 跳轉前後沒有變化

****************************************************************************************************************************

前往救援
原因分析清楚了，開始解決吧，還好vue-router提供瞭解決的api 如下

使用 2.2 中引入的 beforeRouteUpdate 守衛：

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

修改完後的Main.vue如下

data () {
    return {
      path:this.$router.currentRoute.path;
    }
}
beforeRouteUpdate (to, from, next) {
    path = this.$router.currentRoute.path;
}

結果救援現場再次翻車 

頁面上的 path依舊沒有變化

beforeRouteUpdate (to, from, next) {
    // 在當前路由改變，但是該元件被複用時呼叫
    // 舉例來說，對於一個帶有動態引數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
    // 由於會渲染同樣的 Foo 元件，因此元件例項會被複用。而這個鉤子就會在這個情況下被呼叫。
    // 可以訪問元件例項 `this`
  },

上面說的是

/foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，

我的是 從/main 調到/get ，並不符合上面的情況，活該翻車

****************************************************************************************************************************

一次真的救援

data () {
    return {
      path:this.$router.currentRoute.path;
    }
}
watch: {
      '$route' (to, from) {
        this.path = this.$router.currentRoute.path 
      }
}

這次真的救援成功了，頁面的 path從 /main 變成了 /get