vue組件復用時，頁面不刷新

一、 keep-alive包裹的組件，在actived的鈎子函數總進行調用。

 

二、在使用Vue-router做項目時，會遇到如/serviceId/:id這樣只改變id號的場景。由於router-view是復用的，單純的改變id號並不會刷新router-view。

　　當然，我們可以在點擊事件上加上router.go(0)，強制刷新整個頁面來滿足效果，但頁面整體的刷新會使體驗下降。

解決方案有以下幾種：

1、使用watch方法：當id發生變化時，'$route'也會相應地發生變化，因此可以通過watch的方法來進行操作。

watch: {
　　'$route': function (to, from) {
        // 我這里還是用了Vuex，不過應該不影響理解
        this.$store.dispatch('updateActiveTemplateId', this.$route.params.templateId)
        // 通過更新Vuex中的store的數據，讓數據發生變化
        this.getTemplateById()
　　}
},

watch: {
    //監聽相同路由下參數變化的時候，從而實現異步刷新
    $route(to, from) {
      //要處理的操作
    }
  }

 

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

* 按需引入（路由懶加載）：在router/index.js中，

() => import("../views/company.vue") //路由懶加載
這種方法進行路由懶加載

<router-view :key="$route.fullPath" />

 

3、在beforeRouteLeave鈎子函數中進行調用

beforeRouteLeave (to, from, next) {
    // 導航離開該組件的對應路由時調用
    // 可以訪問組件實例 `this`
}