vue 组件route参数跳转,更新页面数据
需求:
页签页面,存于keep-alive中,切换或者跳转回来时,需要刷新页面。两种方式
方案一:
使用watch,但watch会缓存,开多少个页签,再跳转回来,就会重复执行,除非在deactivated时,进行销毁
销毁watch this.unwatch = this.$watch('xx',function(){})
deactivated() {
this.unwatch()
}
watch: { // 解决tab存在时,跳转进来不刷新问题 $route(newValue, oldValue){ console.log(newValue) console.log(oldValue) if(this.$route.params.taskId>0) { this.queryParam.taskId = this.$route.params.taskId this.pagination.current = 1 } console.log(this.pagination) this.getList() }, // 项目切换时,刷新页面 currentProject(newValue) { if(newValue) { this.getList() } } },
方案二(推荐):
来回切换只会触发deactivated和activated声明周期,在activated处理就好
activated () { if(this.$route.params.taskId>0) { this.queryParam.taskId = this.$route.params.taskId this.pagination.current = 1 } console.log(this.pagination) this.getList() },