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

在实际项目中使用字符串拼接，使用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: { titl