参考:https://blog.csdn.net/qq_43103581/article/details/82260073(vue 路由传递参数,刷新页面后参数丢失)

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

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

在详情页获取参数:

this.$route.params.id

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

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

this.$router.push({ name: 'NewsDetail', query: { newsUrl: url } }) 

然后在详情页这样获取参数:
this.$route.query.newsUrl

保存,到页面上重新试了一下,没问题了。
当然了,大神的文章里也介绍了另一种路由传参防止刷新参数消失的方法,也是使用最开始使用的那种方法,只是需要在路由中进行一些改动,下面我直接套用大神的代码说明:
routes: [{path: '/list/:id',name: 'list'}
]

this.$router.push({name:'list', params:{id: id}});

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

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

转载于:https://www.cnblogs.com/secretAngel/p/10065611.html

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

  1. vue从后台获取新数据后刷新_vue传参页面刷新数据丢失问题

    在做vue的时候,经常会遇到组件之间数据的传递问题,通过params或者query传参,但是,当页面刷新的时候,数据会丢失,找不到数据.今天经过总结,解决了这个问题.通过了一下几种情况进行传值: 通过 ...

  2. vue路由跳转传参乱码解决

    vue路由组件跳转传参中文乱码解决 -在路由传参 this.$router.push({path:"/index", query:{msg:encodeURI("我是消息 ...

  3. vue跳转传参刷新后参数消失

    一开始需要实现的功能是跳转到一个页面然后传入一个产品ID号,然后在目标页面用这个ID号显示具体的产品信息 我是用的方法是在template中使用router-link标签 <router-lin ...

  4. vue 如何将参数放到连接上_通过Vue路由传参的两种方式及Vue组件中接收参数的方式...

    1. Vue传参方式 1.1 通过动态路由传参 我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件.例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染.那 ...

  5. vue路由传参的三种方式/含页面刷新参数丢失解决方案(详细)

    vue路由传参的三种方式以及页面刷新参数丢失问题 一.路由传参的三种方式 1.传参方式一:params传参 2.传参方式二:路由属性配置传参 3.传参方式三:query传参 二.三种传递方式的区别 一 ...

  6. vue——路由之路由跳转、路由传参、路由嵌套、路由模式

    相关认识: 后端路由:对于前端的网络请求,不同的pathname,去执行后端的不同业务 前端路由:不同的网址对应各自的页面 vue的前端路由:SPA应用要做出路由效果,就得判断当前网址,然后切换组件 ...

  7. Vue路由传参params 与 query

    一.路由传参分为 params 传参与 query 传参 1. params params 传参类似于网络请求中的 post 请求,params 传过去的参数不会显示在地址栏中(但是不能刷新).par ...

  8. Vue路由传参详解(params 与 query)

    Vue路由传参详解(params 与 query) 前言: 路由传参分为 params 传参与 query 传参 params 传参类似于网络请求中的 post 请求,params 传过去的参数不会显 ...

  9. Vue路由传参的几种方式

    前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式可以划分为params传参和query传参,params传参又可以分为url中显示参数和不显示参数两种方式.具 ...

最新文章

  1. Web登录很简单?开玩笑!
  2. Spring-JDK Timer 以及在Spring(4.0以下)中使用JDK Timer
  3. window文件过长无法删除的处理方式
  4. Python timedelta total_seconds()方法与示例
  5. 2022年全球营销趋势
  6. Atitit 代码要写的漂亮 老板要的是效率 冲怎么办突 目录 1. 代码要写高效,写漂亮,要考虑可扩展性和安全性,到了公司才发现老板要的是效率,不在乎你的代码写的是否高效,安全,是否具有可扩展性
  7. 【股价预测】基于matlab最小二乘法股票价格预测【含Matlab源码 348期】
  8. 新手坐高铁怎么找车厢_坐动车怎么找车厢
  9. win10禁用驱动程序强制签名_如何将驱动程序注入Windows 10 WIM / ISO安装映像?
  10. 非计算机专业的秋招之路
  11. c语言 end while,C语言报错:error: expected ‘while’ at end of input } ^
  12. 动手学深度学习 PyTorch版-Day3
  13. 如何玩转淘宝直通车?提高转化率?
  14. 2022年世界最强与最弱的护照:日本和新加坡并列第一,德国和韩国并列第二,美国和英国排名回升 | 美通社头条...
  15. 10个超赞的jQuery图片滑块动画
  16. 360html怎么保存,360浏览器网页怎么保存电脑桌面上
  17. 自学Python第九天- 模块、包、编码、文件操作、OS 模块、打包
  18. 云主机装黑果实践(4):阿里轻量机上变色龙bootloader启动问题
  19. 深度学习中的BN_CBN_CmBN
  20. 抖音-uid转sec_uid

热门文章

  1. javascript获取当前日期时间及其一些操作
  2. 算法分析与设计「二」递归算法
  3. JNI开发笔记(四)--实现一个简单的JNI工程并生成so库
  4. easyPR源码解析之plate_judge.h
  5. html5前端实习招聘面试,2018头条春招前端实习生面试题目总结
  6. 人体识别_电子皮肤用于人体状态识别的柔性集成传感器
  7. 用户登陆注册功能(PHP)
  8. 良好的编码风格 java_关于java:编码风格是否遵循良好做法
  9. ubuntu mysql双主热备配置_MySql双主热备配置
  10. pandas 空字符串与na区别_python从安装到数据分析应用高手 Pandas处理文本数据(一)...