vue页面前进或后退时刷新数据(重置恢复为初始值)
普通的vue项目使用this.$router.go(-1)就能同时实现后退+刷新了。但是在vue-element-admin或其他复杂的项目中(尤其是后台管理系统),有独特的路由跳转配置,比如在vue-element-admin中使用this.$router.go(-1),原页面的数据并不会刷新,因为配置了快捷导航(标签栏导航)该方案运用了 keep-alive 和 router-view 的结合
·
普通的vue项目使用this.$router.go(-1)就能同时实现后退+刷新了。
但是在vue-element-admin或其他复杂的项目中(尤其是后台管理系统),有独特的路由跳转配置,比如在vue-element-admin中使用this.$router.go(-1),原页面的数据并不会刷新,因为配置了快捷导航(标签栏导航)
该方案运用了 keep-alive 和 router-view 的结合,所以跳转路由后原页面的数据仍然存活。
解决方案:
①、首先,找到页面恢复初始化数据的方法,我采用的是以下方法:
Object.assign(this.$data, this.$options.data())
②、接下来,只要实现逻辑:在路由改变时,执行①的方法,就大功告成了。
判断路由是否改变的方法也很多,可以使用路由守卫钩子,如:
beforeRouteEnter(to, from, next) {
console.log(this, 'beforeRouteEnter'); // undefined
console.log(to, '组件独享守卫beforeRouteEnter第一个参数');
console.log(from, '组件独享守卫beforeRouteEnter第二个参数');
console.log(next, '组件独享守卫beforeRouteEnter第三个参数');
next(vm => {
//因为当钩子执行前,组件实例还没被创建
// vm 就是当前组件的实例相当于上面的 this,所以在 next 方法里你就可以把 vm 当 this 来用了。
console.log(vm);//当前组件的实例
});
},
而我选择更为简洁的方法,使用watch监听route
路由变化:
watch: {
'$route'() {
// 若路由产生变换(退出或提交成功切换回上一页时),将页面数据重置为初始值
Object.assign(this.$data, this.$options.data())
// 此处别忘了加上created里需要执行的请求,因为在keep-alive的单页面中切换路由不会执行created钩子
}
},
THX~
更多推荐
已为社区贡献1条内容
所有评论(0)