vue使用路由跳转页面时携带过多参数，页面刷新后无法再次解析

最新推荐文章于 2025-05-11 15:41:41 发布
最新推荐文章于 2025-05-11 15:41:41 发布
阅读量704 收藏
点赞数 2
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zyk1036/article/details/131845159
版权
文章介绍了如何利用JavaScript的JSON.stringify方法将参数对象转换为字符串保存在本地存储中，然后在组件加载时通过JSON.parse将字符串还原为原来的参数对象，实现数据的序列化和反序列化操作。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  1. 将参数进行序列化

    • 使用JSON.stringify()将参数对象转为字符串
    • 存储到本地存储中
    • 在组件加载时，从本地存储中读取字符串并使用JSON.parse()将其转为参数对象
zyk1036
关注
Vue - 完美解决 Router 路由跳转传参（对象 / 数组）目标页面刷新后参数丢失问题，无论如何刷新页面参数都会存在不会消息的解决方案（详细示例代码，一键复制运行）
王二红
03-23 5275
前言 例如，有个列表页，点击后携带参数进入详情页，当刷新详情页后，携带的参数就获取不到了。 我们要的是，无论怎么刷新目标页面， 都不会出现获取不到的情况，如下图所示： 解决方案 如果通过query的方式传递对象或数组，在地址栏中会被强制转换成[objectObject]，所以获取不到。 但您可以通过将对象参数，通过JSON.stringify()方法进行转换， 在接收页（目标页）使用JSON.parse()再转回来。 //列表页 constdata={type:'a1
Vue2路由守卫：解决路由传参页面刷新后参数消失的问题
l_q_l的专栏
08-24 3031
sessionStorage和localStorage都是HTML5提供的Web Storage API的一部分，用于在客户端存储数据。它们的主要区别在于数据的生命周期、存储的持久性以及适合的应用场景。sessionStorage适合存储临时数据，而localStorage适合存储需要长期保存的数据。两者都有5MB的存储空间限制，且只能存储字符串类型的数据，但可以通过序列化和反序列化的方式存储其他类型的数据。
vue 在IE浏览器路由携带参数超过限制长度怎么解决
weixin_39818813的博客
10-18 6603
最近在做IE浏览器兼容的时候，发现从前一个页面带的参数过多的话，在IE浏览器里面，是不能正常跳转到下一个页面的。 原因是IE浏览器对路由的限制长度为2kb。 解决： 路由传参时放弃get方式，采用post传参的方式。 post方式 页面跳转 //由于动态路由也是传递params的，所以在 this.$router.push() 方法中 path不能和params一起使用，否则par...
vue 跳转路由，带的参数问题
web_zq的博客
07-08 436
由A页面跳转到B页面带的参数 现有需求由A页面跳转到B页面 ，条件是如果是从A页面的链接中有参数id 那么就跳转的时候把参数id传值过去，我尝试了一下，发现 如果A页面链接中有id字段并且有值，例如：A链接？id=1，那么跳转到B页面的链接拼接的参数有 id=1, 如果A页面链接中有id字段并且无值，例如：A链接？id=，那么跳转到B页面的链接拼接的参数有 id=, 如果A页面链接中并没有id此字...
页面间大量数据参数传递
如是说的博客
10-10 3066
前言 我们在开发项目中经常会遇到一种问题，就是在前端页面跳转时传递某些参数，通常我们是通过路由传递的，但是如果数据量很多的情况下，会造成路由非常的长，如果在大的话甚至会超出地址栏URL的最大限度，这就狗带了．最近手头上一个项目的前端刚好遇到这个问题，该项目前端用的是vue2.x．不是什么大问题，但是之前没有认真想过解决办法，于是将解决思路记录下来了．   地址栏URL最大限度 首先我查了不...
【Vue】路由的跳转、传参问题
weixin_43790653的博客
06-27 3485
【Vue】路由的跳转、传参问题
页面跳转传参：参数过长（cookie，url , AngularJs controller 传参实现）
yesicatt的博客
06-12 8607
页面跳转传参：参数过长（cookie传参，url 传参, AngularJs controller 传参实现），页面刷新参数保留
Vue学习笔记（五）Vue2页面跳转问题 | vue-router路由概念、分类与使用 | 编程式路由导航 | 路由组件的缓存 | 5种路由导航守卫 | 嵌套路由 | Vue2项目的打包与部署
希望每天都能进步一点点
06-25 3062
Vue学习笔记（五）Vue2页面跳转问题 | vue-router路由概念、分类与使用 | 编程式路由导航 | 路由组件的缓存 | 5种路由导航守卫 | 嵌套路由 | Vue2项目的打包与部署
小程序路由管理：页面跳转与参数传递全解析
最新发布
小程序开发
05-11 931
页面跳转的5种基础方式及其内存管理差异8种参数传递技术的实现原理与适用场景页面栈结构对路由性能的影响机制路由操作与生命周期钩子的联动关系复杂业务场景下的路由优化策略核心概念：解析页面栈模型与路由基本原理跳转技术：分场景讲解5种跳转API的实现差异传参方案：对比8种参数传递方式的适用场景实战案例：演示电商、工具类小程序典型路由场景优化策略：提供性能优化与异常处理最佳实践页面栈：小程序维护的内存数据结构，存储当前打开的所有页面实例，遵循后进先出原则路由操作。
Vue前端页面跳转后数据保持技术解析
在实现“vue回退不刷新，保存原有数据”的场景中，可以使用Keep-alive结合路由的beforeRouteLeave和beforeRouteEnter守卫来确保在路由改变时，Vue组件能够保存状态。当用户操作浏览器后退按钮时，可以通过判断当前...
跳转传多个参数（很多很多个）
Joey3的博客
11-01 449
参数说明： 跳转的时候携带参数（传过去的实质上是字符串，在接收的地方（B界面）需要转换） A界面 B界面
vue通过$router.push带参数跳转路由
6块腹肌的博客
08-25 1929
方法如下： 1：params this.$router.push({name: 'test', params: {html: this.html}}) this.$router.push({path: '/details', query: {data: data}}) **注意** 当使用path的时候，参数需要使用query来传，否则在目标页面无法接收到参数 其中name/path...
vue路由传多个参数_vue路由传参（两种方法总结）
weixin_34651330的博客
01-30 8217
vue传递参数有多种，据我了解、熟悉的其中两种总结如下：一、组件通过query来传递flag参数为1，相当与在 url 地址后面拼接参数 例如：localhost:8080/house?flag=1。 具体实例如下：首页点击house.vue页面如下取值：测试路由传参{{ this.$route.query.flag}}此种方法通俗，明了，但是缺点是参数直接展示在了请求的url里面，一般可以传递一...
vue router页面跳转及传参、Vue获取用户输入到页面的数据在另一个页面使用
m0_61663332的博客
12-28 4592
vue router页面跳转及传参、Vue获取用户输入到页面的数据在另一个页面使用通过路由传参拿到跳转前页面数据并在页面使用传来的数据 使用场景：用户在充值页面输入的账号和充值金额，跳转到充值成功页面展示数据！
vue项目使用button进行页面跳转时路由带参数引起错误的解决办法
码出精彩
06-27 3508
vue项目使用button进行页面跳转时路由带参数引起错误的解决办法1、问题描述2、解决的方法3、原理分析 1、问题描述 如图，点击按钮跳转到其他路由会出现带参数的情况（ps：我是用编程式导航进行跳转的，vue编程式导航） 2、解决的方法 我是采用控制变量的方法找出问题并解决的。具体是，把可能的错误的代码删除，其他不变，然后重新运行。然后我就找出问题了。 如图，我的 button 一开始是这样的，会出现问题。 解决方法： 如上图，加上type="button"就不会出现路由带参数了。 3、原理分析
vue3 路由跳转携带参数
weixin_50556190的博客
04-12 2825
这种写法防止url地址携带 多选的大量数据。
netcore vue页面路径跳转出现404的解决方法，url传参太多导致跳转出现404，全网最全的
weixin_44730759的博客
12-13 212
经过实测有效果
微信小程序页面跳转url传参，对象数据过长问题
qq_26282869的博客
11-27 3587
小程序url传参如果是对象的话需要先用JSON.stringify()转换一下，接受页面在用JSON.parse()再转换回来。 但这样传参有一个问题，当对象数据长度过大时会报错，因为url传参时程序把过长的那段数据给截取掉了，导致数据转换回来时格式不对而报错。 这时可以再添加另一个API：encodeURIComponent(obj) 和 decodeURIComponent(options.o...
vue路由跳转this.$router.push带参数两种方法
m0_49714202的博客
04-21 3663
index.vue html <el-table class="table" :data="tableData" style="width: 100%"> <el-table-column label="" width="1000"> <template slot-scope="scope"> <!-- <div @click="get(scope.$index)"> -
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值