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

觉得好，就打个赏呗

觉得好，就一键三连呗