码迷,mamicode.com
首页 > 其他好文 > 详细

Vue路由传参及传参后刷新导致参数消失处理

时间:2019-09-24 10:31:29      阅读:130      评论:0      收藏:0      [点我收藏+]

标签:跳转   百度   sde   大神   article   三方   space   number   body   

项目功能需要,要从列表页跳转到第三方提供的URL上(这里第三方页面我是通过iframe引入在详情页,目的是点击返回时可以通过keepAlive让列表页不刷新,如果不通过iframe直接跳第三方链接,那么返回必然会重新拉取数据),一路百度,刚开始使用

1
this.$router.push({name:‘list‘, params:{id: id}})

在详情页获取参数:

1
this.$route.params.id

试了一下,可以拿到数据,很开心,本以为这样就结束了,然后刷新了下页面,发现页面啥都没了(因为传过来的是URL),百度了下,原来这种传参刷新页面时参数会消失

 

没办法,问了下老大,他说用query属性设置,于是就接着百度,找到大神的文章:https://blog.csdn.net/qq_43103581/article/details/82260073,套用里面的方法:

1
this.$router.push({ name: ‘NewsDetail‘, query: { newsUrl: url } }) 
 
然后在详情页这样获取参数:
1
this.$route.query.newsUrl
 
保存,到页面上重新试了一下,没问题了。
 
 
当然了,大神的文章里也介绍了另一种路由传参防止刷新参数消失的方法,也是使用最开始使用的那种方法,只是需要在路由中进行一些改动,下面我直接套用大神的代码说明:
1
2
3
4
5
6
routes: [
    {
      path: ‘/list/:id‘,
      name: ‘list‘
    }
]
 
1
this.$router.push({name:‘list‘, params:{id: id}});

获取参数:this.$route.params.id即可

 
总结:以上两种方法均可实现路由传参且防止刷新参数消失,喜欢哪种方法用哪种就好。

Vue路由传参及传参后刷新导致参数消失处理

标签:跳转   百度   sde   大神   article   三方   space   number   body   

原文地址:https://www.cnblogs.com/matd/p/11576696.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!