路由传参刷新页面就消失了

最新推荐文章于 2024-06-24 20:15:29 发布
最新推荐文章于 2024-06-24 20:15:29 发布
阅读量522 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/laofugui/p/8034139.html

解决办法:

1.用params时,如果传的参数时id,那么可以在(比如说是A页面跳转道B页面)可以在B页面的url中加上传过来的id,这样id会存在地址栏中,也就传过来了

2.不用params,用query传,数据会保存

3.可以存到sessionStorage

转载于:https://www.cnblogs.com/laofugui/p/8034139.html

Vue - 完美解决 Router 路由跳转传参（对象 / 数组）目标页面刷新后参数丢失问题，无论如何刷新页面参数都会存在不会消息的解决方案（详细示例代码，一键复制运行）
🏆 前端领域优质创作者
03-23 5347
前言 例如，有个列表页，点击后携带参数进入详情页，当刷新详情页后，携带的参数就获取不到了。 我们要的是，无论怎么刷新目标页面， 都不会出现获取不到的情况，如下图所示： 解决方案 如果通过query的方式传递对象或数组，在地址栏中会被强制转换成[objectObject]，所以获取不到。 但您可以通过将对象参数，通过JSON.stringify()方法进行转换， 在接收页（目标页）使用JSON.parse()再转回来。 //列表页 constdata={type:'a1
Vue2路由守卫：解决路由传参页面刷新后参数消失的问题
最新发布
l_q_l的专栏
08-24 3164
sessionStorage和localStorage都是HTML5提供的Web Storage API的一部分，用于在客户端存储数据。它们的主要区别在于数据的生命周期、存储的持久性以及适合的应用场景。sessionStorage适合存储临时数据，而localStorage适合存储需要长期保存的数据。两者都有5MB的存储空间限制，且只能存储字符串类型的数据，但可以通过序列化和反序列化的方式存储其他类型的数据。
vue路由传参页面刷新参数丢失问题解决方案
12-13
最近项目中涉及到跨页面传参数和后台进行数据交互，看到需求之后第一反应就是用路由传参来解决；Vue中给我们提供了三种路由传参方式，下面我们一个一个的来看一下： 方法一：params传参： this.$router.push({ name:"admin", 　　　　//这里的params是一个对象，id是属性名，item.id是值(可以从当前组件或者Vue实例上直接取) params:{id:item.id} }) //这个组件对应的路由配置 { 　　//组件路径 path: '/admin', 　　//组件别名 name: 'admin', 　　//组件名
vue，下级页面刷新导致路由跳转带过来的数据消失的解决方法
weixin_34126215的博客
12-20 525
if(typeof(this.$route.query.result)=='string'){ //刷新时走这 }else{ //正常路由跳转过来后就把数据塞到 localStorage let obj = JSON.stringify(this.$route.query); //转化为JSON字符串 localStorage.setItem("prizeResult...
vue3 路由传参只传一次问题的解决方法
qq_45662523的博客
08-29 1250
vue3 路由传参只传一次问题的解决方法
路由传参——刷新页面会数据丢失
qq_50276105的博客
03-06 2117
但是用到this.$route.query.ObjectData的页面，刷新后会导致this.$route.query.ObjectData数据丢失。【2】传递对象，或者含有对象的数组，在传之前先把数据转换成字符串再进行传递--》JSON.stringify()，获取的时候把字符串转换成对象--》JSON.parse()当index页面刷新之后，再打印 this.$route.query.ObjectData，会得到一个[Object Object] 未知数据，导致报错！
Vue路由传参当传参后刷新导致参数消失问题处理
typhoonpython的博客
04-28 2338
在实际项目中使用字符串拼接，使用iframe跳转链接进行报表展示。 路由传参的时候出现刷新参数丢失问题，具体解决如下： 在进行路由配置的时候使用如下设置进行的配置，用的params方法进行参数传递。 { path: 'data-detail-edit/:type', component: () => import('@/views/cost/costDetail/index'), name: 'test1' params: { type: 1 }, me
Vue路由传参及传参后刷新导致参数消失处理
weixin_46039052的博客
10-19 741
引用:Vue路由传参及传参后刷新导致参数消失处理 - secretAngel - 博客园 项目功能需要，要从列表页跳转到详情页，需要携带参数id，在详情页获取并且使用 1 this.$router.push({name:'list', params:{id: id}}) 在详情页获取参数： 1 this.$route.params.id 试了一下，可以拿到数据，很开心，本以为这样就结束了，然后刷新了下页面，发现传过来的
Vue进阶（六十七）页面刷新路由传参丢失问题分析及解决_vue路由刷新参数消失
2401_85124192的博客
06-24 1104
小编综合了阿里的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析。
vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题
有梦想的咸鱼前端
09-04 6694
最近项目中涉及到跨页面传参数和后台进行数据交互，看到需求之后第一反应就是用路由传参来解决；Vue中给我们提供了三种路由传参方式，下面我们一个一个的来看一下： 方法一：params传参： this.$router.push({ name:"admin", 　　　　//这里的params是一个对象，id是属性名，item.id是值(可以从当前组件或者Vue实例上直接取) ...
router路由跳转使用query传递参数刷新后数据无法获取，变成[object object]
m0_37097272的博客
05-19 1715
跳转路由使用的是history.push，在query中添加了要传给详情页的值，如下： history.push({ pathname: '/menu/detail', query: { comCodeOption: this.state.comCodeOption, } 其中comCodeOption格式如下： [ { "comCode": "23", "comName": "黑龙江分公司" }, {
angular.js路由传参刷新会消失的问题
Zheng_lucky的博客
11-01 2275
angular.js路由传参刷新会消失的问题 1.最近公司用angular.js，发现一个问题，如果是上一个页面携带参数过来，在当前页面刷新，参数会丢失 这里是用params进行参数的传递，参数不会出现在地址栏上，但是刷新界面会丢失参数。 解决办法 1.路由配置写法 在路由配置的时候把参数配置在URL上面，这个写法参数会出现在地址栏上 2.HTML页面写法 两种写法在控制器中获取是一样的，谁有更...
vue.js用vue-router路由传参时页面刷新后参数消失的问题
milli236的博客
08-31 1万+
如果要用 params 传参的话，可能需要在你的路由路径里也加上这个参数，比如你用this.$router.push({name:'detail', params:{userId: userId}});跳转，那么在路由里就要这样写 this.$router.push({name:'Detail',params:{pro_id:pro_id}}); router - index.js 路...
vue路由传参刷新丢失
gys9895的博客
06-29 4492
543534354
vue-router路由参数刷新消失的问题
尹小姐的博客
04-11 1万+
vue-router路由参数刷新消失的问题 页面使用vue-router在跳转时发的参数有用来给下一个页面请求数据用的。在进入页面后再次刷新，参数就消失了,解决方案如下： 1、如果要用 params 传参的话，可能需要在你的路由路径里也加上这个参数，比如你用 this.$router.push({name:'articleDetail, params:{articleId: arti...
Vue路由传参页面刷新丢失
张木期的博客
10-21 3106
今天做一个项目,页面直接传递的参数都非常好,但是一刷新就各种报错,一查原来url后面的传递的参数丢失了,于是便去找解决方案,下面总结一下: Vue中给我们提供了三种路由传参方式，下面我们一个一个的来看一下： 方法一：params传参： this.$router.push({ name:"admin", 　　　　//这里的params是一个对象，id是属性名，item.id是值(可以从当前组件或者Vue实例上直接取) params:{id:item.id} }) //这个组件对应的
vue路由history模式刷新页面时页面丢失时常见的两种解决方法
Galin的博客
02-27 7197
方法一： 1 2 3 4 5 6 7 8 location /{ root /data/nginx/html; index index.html index.htm; if (!-e $request_filename) { rewr...
vue-router 路由跳转传参刷新页面后参数丢失问题
热门推荐
夏夏
02-15 1万+
常见场景：点击列表详情，跳转到详情内页，传递id参数获取详情数据。 我们先来看看路由跳转的几种方式： 1、通过params方式传参 通过$route.push的path携带参数方式(路由配置中指定参数) // 路由配置 { path: '/detail/:id', //若id后面加?代表这个参数是可选的，即使不传id也不会导致页面无法访问 name: 'detail', component: Detail } // 列表中跳转 this.$router.push({
Vue query路由传参跳转页面，跳转后刷新页面导致参数消失处理
06-06
Vue Router提供两种方式进行路由传参，一种是使用params，另一种是使用query。 使用params传参时，参数会被编码到URL的路径中，例如： ```javascript this.$router.push({ path: '/user/123' }) ``` 这样会跳转到...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值