Vue同一个页面不关闭,再次进入页面数据不刷新问题

Vue同一个页面不关闭,再次进入页面数据不刷新问题

目录

  • Vue同一个页面不关闭,再次进入页面数据不刷新问题
    • 一、问题描述
    • 二、问题分析
    • 三、问题解决
      • 3.1 方法一:watch监听$route的变化
      • 3.2 方法二:activated和deactivated
    • 四、漂亮的Ending

一、问题描述

  • 从A列表页面跳转到B详情页面,第一次跳转,B详情页面的数据显示正常
  • 从A列表页面选择了另一条数据,第二次跳转到B页面,B页面的数据不变,不更新
  • 关闭B详情页面,再从A列表页面打开B,则数据显示正常

二、问题分析

  • 数据刷新函数this.updateData()放到了created里面
  • created只在页面创建的时候,执行一次,所以无法做到数据及时更新

三、问题解决

3.1 方法一:watch监听$route的变化

监听页面路由的变化,发现页面重新进来后,就及时更新数据

    watch: {
      
      '$route' (to, from) {
      
        // console.log("watch", to, from)
        if(to.path=="/samplingAuto/auto"){
     
          console.log("刷新")
          this.updateData()
        }
      }
    },

3.2 方法二:activated和deactivated

    activated: function () {
     
      console.log("刷新")
      this.updateData()
    },

四、漂亮的Ending

觉得好,就打个赏呗
觉得好,就一键三连呗

Vue同一个页面不关闭,再次进入页面数据不刷新问题_第1张图片

你可能感兴趣的:(前端Vue,Vue.js,数据刷新,二次进入页面,watch,activated)