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

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

一、问题描述

• 从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

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