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`
}

vue刷新當前路由：router-view 復用組件時不刷新的3種解決方案總結