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

小鱼儿 2022-10-27 00:27 11阅读 0赞

# 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 ##

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thbmd3ZWlqaWFu_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thbmd3ZWlqaWFu_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/ce636b842ba24ba19c90f028d551974b.png