vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構建單頁面應用。vue的單頁面應用是基于路由和組件的，路由用于設定訪問路徑，并將路徑和組件映射起來。傳統的頁面應用，是用一些超鏈接來實現頁面切換和跳轉的。在vue-router單頁面應用中，則是路徑之間的切換，也就是組件的切換。
對于路由，不同的路由跳轉，vue會幫我們刷新路由，但是我今天要說的是，同一路由刷新我們的解決方法。
問題背景：
點擊用戶頭像 => 進入用戶個人中心，在用戶個人中心里點擊其他用戶的頭像，我希望顯示被點擊用戶的個人中心，但只看到了路由參數在發生變化，頁面內容并沒有更新。
<script>export default {data() {return { data: {} } }, methods: { fetchDate() { // 使用 axios獲取數據 ...... }, created() { this.fetchDate(); } } </script> 解決辦法：
使用 watch，觀察路由，一旦發生變化便重新獲取數據！
<script>export default {data() {return { data: {} } }, methods: { fetchDate() { // 使用 axios獲取數據 ...... }, created() { // 組件創建完后獲取數據， // 此時 data 已經被 observed 了 this.fetchDate(); }, watch: { // 如果路由有變化，會再次執行該方法 "$route": "fetchDate" } } </script> 拓展學習
在使用Vue-router做項目時，會遇到如/serviceId/:id這樣只改變id號的場景。由于router-view是復用的，單純的改變id號并不會刷新router-view，而這并不是我們所期望的結果
當然，我們可以在點擊事件上加上router.go(0)，強制刷新整個頁面來滿足效果。但頁面整體的刷新會使體驗下降，并且作為個人也不是很能接受這樣的方法。在查閱了一些資料后，發現可以有以下兩種方法可以解決問題。
1、使用watch方法
watch方法據說是官方推薦的方法(抱歉，我沒好好看文檔)。當id發生變化時，'$route'也會相應地發生變化，因此可以通過watch的方法來進行操作。
watch: {'$route': function (to, from) {// 我這里還是用了Vuex，不過應該不影響理解this.$store.dispatch('updateActiveTemplateId', this.$route.params.templateId)// 通過更新Vuex中的store的數據，讓數據發生變化this.getTemplateById()}
}, 2、通過改變router-view中的key來達到刷新組件的目的，我現在用的就是這種方法（因為我使用的按需加載，所以加載組件也不會加載所有界面）
<router-view :key="activeDate"></router-view>
//我用了一個簡單粗暴的方式來改變key，時間戳（捂臉）
//this.activeDate = new Date() 3、還有一種官方文檔的方法
后來看博客有了新方案——beforeRouteLeave
在組件內直接使用，前提是你用了vue-router:
beforeRouteLeave (to, from, next) {// 導航離開該組件的對應路由時調用// 可以訪問組件實例 `this`
} ?
)
)
