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()
  },

 

posted @ 2022-02-23 16:19  zipon  阅读(402)  评论(0编辑  收藏  举报