Vue路由传参当传参后刷新导致参数消失问题处理

vue 专栏收录该内容
2 篇文章 0 订阅

在实际项目中使用字符串拼接,使用iframe跳转链接进行报表展示。

路由传参的时候出现刷新参数丢失问题,具体解决如下:

在进行路由配置的时候使用如下设置进行的配置,用的params方法进行参数传递。

{
    path: 'data-detail-edit/:type',
    component: () => import('@/views/cost/costDetail/index'),
    name: 'test1'
    params: { type: 1 },
    meta: { title: '测试', icon: 'test', routeid: '020402' }
}

在界面使用的下面代码获取

this.type = this.$route.params.type

如果采用这种方式,在界面刷新的时候会参数丢掉返回一个空对象,所以获取的报表也将不存在了。

解决方法:

在进行路由配置的时候将params改成query,使用query 属性设置。如下:

{
    path: 'data-detail-edit/:type',
    component: () => import('@/views/cost/costDetail/index'),
    name: 'test1'
    query: { type: 1 },
    meta: { title: '测试', icon: 'test', routeid: '020402' }
}

在页面进行获取的时候,代码如下:

this.type = this.$route.query.type

简单来说,query属性相当于get请求,地址栏可以看到参数,当刷新的时候地址不变,参数不丢;params属性相当于post请求,参数不会在地址栏出现,当刷新的时候,直接刷新的地址,相应的参数也就变为了空。

 

 

 

 

 

 

 

  • 1
    点赞
  • 2
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值