Vue路由传参及传参后刷新导致参数消失处理
参考: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路由传参及传参后刷新导致参数消失处理相关推荐
- vue从后台获取新数据后刷新_vue传参页面刷新数据丢失问题
在做vue的时候,经常会遇到组件之间数据的传递问题,通过params或者query传参,但是,当页面刷新的时候,数据会丢失,找不到数据.今天经过总结,解决了这个问题.通过了一下几种情况进行传值: 通过 ...
- vue路由跳转传参乱码解决
vue路由组件跳转传参中文乱码解决 -在路由传参 this.$router.push({path:"/index", query:{msg:encodeURI("我是消息 ...
- vue跳转传参刷新后参数消失
一开始需要实现的功能是跳转到一个页面然后传入一个产品ID号,然后在目标页面用这个ID号显示具体的产品信息 我是用的方法是在template中使用router-link标签 <router-lin ...
- vue 如何将参数放到连接上_通过Vue路由传参的两种方式及Vue组件中接收参数的方式...
1. Vue传参方式 1.1 通过动态路由传参 我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件.例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染.那 ...
- vue路由传参的三种方式/含页面刷新参数丢失解决方案(详细)
vue路由传参的三种方式以及页面刷新参数丢失问题 一.路由传参的三种方式 1.传参方式一:params传参 2.传参方式二:路由属性配置传参 3.传参方式三:query传参 二.三种传递方式的区别 一 ...
- vue——路由之路由跳转、路由传参、路由嵌套、路由模式
相关认识: 后端路由:对于前端的网络请求,不同的pathname,去执行后端的不同业务 前端路由:不同的网址对应各自的页面 vue的前端路由:SPA应用要做出路由效果,就得判断当前网址,然后切换组件 ...
- Vue路由传参params 与 query
一.路由传参分为 params 传参与 query 传参 1. params params 传参类似于网络请求中的 post 请求,params 传过去的参数不会显示在地址栏中(但是不能刷新).par ...
- Vue路由传参详解(params 与 query)
Vue路由传参详解(params 与 query) 前言: 路由传参分为 params 传参与 query 传参 params 传参类似于网络请求中的 post 请求,params 传过去的参数不会显 ...
- Vue路由传参的几种方式
前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式可以划分为params传参和query传参,params传参又可以分为url中显示参数和不显示参数两种方式.具 ...
最新文章
- Web登录很简单?开玩笑!
- Spring-JDK Timer 以及在Spring(4.0以下)中使用JDK Timer
- window文件过长无法删除的处理方式
- Python timedelta total_seconds()方法与示例
- 2022年全球营销趋势
- Atitit 代码要写的漂亮 老板要的是效率 冲怎么办突 目录 1. 代码要写高效,写漂亮,要考虑可扩展性和安全性,到了公司才发现老板要的是效率,不在乎你的代码写的是否高效,安全,是否具有可扩展性
- 【股价预测】基于matlab最小二乘法股票价格预测【含Matlab源码 348期】
- 新手坐高铁怎么找车厢_坐动车怎么找车厢
- win10禁用驱动程序强制签名_如何将驱动程序注入Windows 10 WIM / ISO安装映像?
- 非计算机专业的秋招之路
- c语言 end while,C语言报错:error: expected ‘while’ at end of input } ^
- 动手学深度学习 PyTorch版-Day3
- 如何玩转淘宝直通车?提高转化率?
- 2022年世界最强与最弱的护照:日本和新加坡并列第一,德国和韩国并列第二,美国和英国排名回升 | 美通社头条...
- 10个超赞的jQuery图片滑块动画
- 360html怎么保存,360浏览器网页怎么保存电脑桌面上
- 自学Python第九天- 模块、包、编码、文件操作、OS 模块、打包
- 云主机装黑果实践(4):阿里轻量机上变色龙bootloader启动问题
- 深度学习中的BN_CBN_CmBN
- 抖音-uid转sec_uid
热门文章
- javascript获取当前日期时间及其一些操作
- 算法分析与设计「二」递归算法
- JNI开发笔记(四)--实现一个简单的JNI工程并生成so库
- easyPR源码解析之plate_judge.h
- html5前端实习招聘面试,2018头条春招前端实习生面试题目总结
- 人体识别_电子皮肤用于人体状态识别的柔性集成传感器
- 用户登陆注册功能(PHP)
- 良好的编码风格 java_关于java:编码风格是否遵循良好做法
- ubuntu mysql双主热备配置_MySql双主热备配置
- pandas 空字符串与na区别_python从安装到数据分析应用高手 Pandas处理文本数据(一)...