vue重新整理目前路由：router-view 複用元件時不重新整理的3種解決方案總結

　　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、使用watch雖然

是解決了，可每次這麼寫也太不優雅了吧？秉持着能偷懶則偷懶的原則，我們希望代碼這樣寫：

　　通過改變router-view中的key來達到重新整理元件的目的，我現在用的就是這種方法（因為我使用的按需加載，是以加載元件也不會加載所有界面）

<router-view :key="activeDate"></router-view>
//我用了一個簡單粗暴的方式來改變key，時間戳（捂臉）
//this.activeDate = new Date()      

　　那要怎麼樣才能實作這樣的效果呢，答案是給

router-view

添加一個

unique

的

key

，這樣即使是公用元件，隻要

url

變化了，就一定會重新建立這個元件。（雖然損失了一丢丢性能，但避免了無限的

bug

）。同時，我可以将

key

直接設定為路由的完整路徑，一舉兩得。

3、還有一種官方文檔的方法

beforeRouteLeave (to, from, next) {
    // 導航離開該元件的對應路由時調用
    // 可以通路元件執行個體 `this`
}