vue+elementui tab切换丢失参数

在Vue+ElementUI的项目中,当从列表跳转到详情页并进行Tab切换时,参数可能会丢失。问题源于使用query传参,从其他菜单切换时不传参。解决方法是改用params传参。在列表页中,将query方式改为params方式传递,而在详情页相应修改接收参数的方式。

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

项目场景:

vue+elementui列表跳详情后,点其他菜单进行tab切换丢失详情页参数


问题描述

vue+elementui列表跳详情后,点其他菜单进行tab切换丢失详情页参数,

如图:

  1. 未切换时的页面效果,此时详情页正常显示
    未切换时的页面参数
  2. 切换为其他页面再切回来的页面效果,因为之前的缓存,页面暂且能正常显示。看路由部分,参数已经丢失

切换后不刷新

  1. 切换为其他页面再切回来,并且刷新页面。因为参数已经丢失,页面数据为空
    切换并刷新页面

原因分析:

列表跳详情用的query传参,只有从列表页跳过去才会正常传参,从其他菜单切换过去不传参导致参数丢失为空


解决方案:

用params代替query传参

列表页:
原传参方式:

//查看详情
 showHandle(id) {
   
      this.$router.push({
   
        name: "paymentRecordSee",
       query: {
    id: id, title: "线下支付记录查看" }
      });
 
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值