vue路由跳轉的時候，組件的值不更新的問題

1.背景

最近在寫項目時，使用router-view複用組件，但是產生了一個問題：即使路由改變了，但是使用router-view複用的組件之間在跳轉的過程中不刷新。
具體：我想從別的用戶的快捷週報進入我自己的快捷週報頁面時，router-view複用的組件內容不進行刷新。

2.解決辦法

1. 給router-view設置key值，不同的key值可以表明它們不是同一個組件，這樣組件的內容就會進行更新。爲了讓key值不同，我們可以使用當前時間的時間戳作爲key。

      <router-view id="contain" :key="new Date().getTime()"></router-view>

這個方法看上去簡單，其實會帶來一些麻煩。在router-view中存在子路由，子路由不會自動攜帶參數，而:key會讓組件在點擊子路由之後的時候也重新獲取一次數據，如果組件是通過url上的參數進行數據的獲取，那麼在router-view切換子路由的時候，就會導致獲取不到數據，或者是獲取到錯誤的數據的情況。

2. 使用watch檢測路由，當發現路由改變，就把信息重新獲取一次。

watch:{
	$router:"getInfo"
}，
methods:{
	getInfo(){}
}

但是這裏有一個問題，就是watch檢測到路由改變之後，組件不會刷新，只是調用watch中重新獲取一下數據，所以一些頁面創建時進行的一些初始化的操作最好封裝成一個函數裏面，在路由更新的時候重新調用。

3. 導航守衛（ beforeRouteLeave）（官方推薦）
   在檢測到路由即將離開的時候，把數據全改完，再離開。

 beforeRouteLeave(to,from,next){
      this.userId = null;
      this.getInfo();
      next();
    }