Vue用router.push(传参)跳转页面,参数改变,跳转页面数据不自动刷新需手动刷新的解决办法

本文介绍了在Vue前端项目中,遇到页面跳转后参数传递成功但数据未更新的问题。问题源于页面加载时数据未及时刷新。解决方案是利用Vue的生命周期钩子函数`activated()`来在每次进入详情页面时重新获取和加载数据,确保数据的实时更新。同时调整了`created()`和`mounted()`中的逻辑,确保参数正确解析和初始化。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

项目场景:
在vue前端工程里,通过点击连接传参,到另一个页面,并根据参数进行刷新页面

问题描述:
vue跳转时通过使用router进行跳转,跳转后参数传到了,但是页面还是上一个参数的数据,页面的数据并没有更新,点击刷新后,数据才是最新的参数传进来的

总页面,点击调转方法:
gotoGpProcess(row) {
      let sync_id = row.sync_id;
      sessionStorage.setItem("gpsync_id", sync_id);
      this.$router.push("archSyncGp116Process");
      //this.$router.push({path:"archSyncGp116Process",query:{sync_id:row.sync_id}});
    },
 
详情页面,解析参数并加载数据:
    
  created() {
   this.syncId = sessionStorage.getItem("gpsync_id");
  this.initSyncId();
   this.getData();
   this.queryGpCount();
  }, 
 
    initSyncId() {
      if (this.syncId !== null) {
        this.workFlow = this.syncId.substring(0, this.syncId.lastIndexOf("_"));
        this.beginEndDate = this.syncId.substring(
          this.syncId.lastIndexOf("_") + 1,
          this.syncId.length
        );
      }
    },
    
 

原因分析:
页面加载刷新的问题,与使用create方法 有关

解决方案:
active(),created(),解决刷新问题,如下所述:

created():在创建vue对象时,当html渲染之前就触发;但是注意,全局vue.js不强制刷新或者重启时只创建一次,也就是说,created()只会触发一次;

activated():在vue对象存活的情况下,进入当前存在activated()函数的页面时,一进入页面就触发;可用于初始化页面数据等

总页面,点击调转方法:
gotoGpProcess(row) {
      let sync_id = row.sync_id;
      sessionStorage.setItem("gpsync_id", sync_id);
      this.$router.push("archSyncGp116Process");
      //this.$router.push({path:"archSyncGp116Process",query:{sync_id:row.sync_id}});
    },
    
详情页面,解析参数并加载数据:
     activated(){
    this.mounted();
    this.getData();
    this.queryGpCount();
  },
  created() {
   this.mounted();
   // this.syncId = sessionStorage.getItem("gpsync_id");
  // this.syncId = this.$route.query.sync_id
 //   this.initSyncId();
 //   this.getData();
   // this.queryGpCount();
  }, 
  mounted(){
      this.syncId = sessionStorage.getItem("gpsync_id");
      //this.syncId = this.$route.query.sync_id
      this.initSyncId();
    },
    initSyncId() {
      if (this.syncId !== null) {
        this.workFlow = this.syncId.substring(0, this.syncId.lastIndexOf("_"));
        this.beginEndDate = this.syncId.substring(
          this.syncId.lastIndexOf("_") + 1,
          this.syncId.length
        );
      }
    },
    

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值