vue组件复用时，页面不刷新

一、 keep-alive包裹的组件，在actived的钩子函数总进行调用。

二、在使用Vue-router做项目时，会遇到如/serviceId/:id这样只改变id号的场景。由于router-view是复用的，单纯的改变id号并不会刷新router-view。

　　当然，我们可以在点击事件上加上router.go(0)，强制刷新整个页面来满足效果，但页面整体的刷新会使体验下降。

解决方案有以下几种：

1、使用watch方法：当id发生变化时，'$route'也会相应地发生变化，因此可以通过watch的方法来进行操作。

1 watch: {
2 　　'$route': function (to, from) {
3         // 我这里还是用了Vuex，不过应该不影响理解
4         this.$store.dispatch('updateActiveTemplateId', this.$route.params.templateId)
5         // 通过更新Vuex中的store的数据，让数据发生变化
6         this.getTemplateById()
7 　　}
8 },

1 watch: {
2     //监听相同路由下参数变化的时候，从而实现异步刷新
3     $route(to, from) {
4       //要处理的操作
5     }
6   }

2、通过改变router-view中的key来达到刷新组件的目的，我现在用的就是这种方法（因为我使用的按需加载，所以加载组件也不会加载所有界面）

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

() => import("../views/company.vue") //路由懒加载
这种方法进行路由懒加载

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

3、在beforeRouteLeave钩子函数中进行调用

1 beforeRouteLeave (to, from, next) {
2     // 导航离开该组件的对应路由时调用
3     // 可以访问组件实例 `this`
4 }

vue组件复用时，页面不刷新

相关推荐