Vue前端项目通过路由传参后,刷新页面参数失效为空

使用watch监听路由传过来的两个参数mId和cId

每当传的值发生变化时,对应的处理函数就会被调用

当NewId存在时,则将新的Id储存到localStorage中,并调用接口(刷新)

通过"watch"选项,Vue.js可以实时监测路由参数的变化,并在变化发生时执行相应的操作,以确保界面与路由参数同步更新。

 watch: {
  '$route.params.mId': {
    handler(newMId, oldMId) {
      console.log('moId changed:', newMId);
      if (newMId) {
        localStorage.setItem('mId', newMId);
        this.getList();
        this.getPolymerize();
      }
    },
    immediate: true,
  },
  '$route.params.cId': {
    handler(newCId, oldCId) {
      console.log('cId changed:', newCId);
      if (newCId) {
        localStorage.setItem('cId', newCId);
        this.getDetail();
      }
    },
    immediate: true,
  },
},

接下来在你所需要参数的地方使用

methods:{
        getList() {
                const storedId = localStorage.getItem('mId')
                //你所需要的代码逻辑
},
        getDetail() {
                
                const storedId = localStorage.getItem('cId')
                //你所需要的代码逻辑
},

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值