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