解决vue 路由传参后退参数丢失的问题

业务需求

从A页面传参跳转B页面,B页面传参跳转C页面,C页面可以返回B页面

遇到问题

当C页面返回B页面时,由于B页面参数丢失导致页面渲染失败

解决方案
利用localStorage

思路:把B页面拿到的参数啊也传给C页面,在C页面把数据存储在localStorage中,返回B页面判断有无,再从storage中取出

// A页面
linkToDetail(id?: string, sheetSize?: number) {  
    this.$router.push({
      name: 'B',
      query: {
        id: id + '',
      },
    });
  }

// B页面
// 判断数据源来源
async created() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
    } else {
      const statisticsAnalyzeParams = localStorage.getItem(
      'statisticsAnalyzeParams',
      );
      this.id = JSON.parse(statisticsAnalyzeParams).id;
    }
    await this.getPageStatistics({ id: this.id });
}

linkToDetail(id: any) {
    this.$router.push({
      name: 'C',
      params: {
        pageId: this.id + '',
      },
    });
  }

// C页面
  beforeRouteLeave(to: any, from: any, next: any) {
    const tranferParams = {
      id: this.$route.params.pageId,
    };
   
      localStorage.setItem(
        'statisticsAnalyzeParams',
        JSON.stringify(tranferParams),
      );
     
    next();
  }
使用keep-alive
<keep-alive>
  <router-view v-if="$route.meta.keepAlive">
    <!-- 这里是会被缓存的视图组件! -->
  </router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive">
  <!-- 这里是不被缓存的视图组件! -->
</router-view>
// 路由文件
{
    path:'/index',
    name:'B',
    component:index,
    meta: {
        keepAlive: true // 需要被缓存
    }
},
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值