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

最新推荐文章于 2024-08-12 16:28:02 发布

原创

最新推荐文章于 2024-08-12 16:28:02 发布 · 2.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

在Vue项目中，通过params传递路由参数时，刷新页面会导致参数丢失。为解决此问题，可将params改为query，因为query类似GET请求，刷新时参数保留在URL中。在配置路由和获取参数时相应调整代码，确保刷新后仍能获取到参数。

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

在页面进行获取的时候，代码如下：