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

最新推荐文章于 2025-05-11 15:41:41 发布

原创最新推荐文章于 2025-05-11 15:41:41 发布 · 772 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

文章介绍了如何利用JavaScript的JSON.stringify方法将参数对象转换为字符串保存在本地存储中，然后在组件加载时通过JSON.parse将字符串还原为原来的参数对象，实现数据的序列化和反序列化操作。

将参数进行序列化
- 使用JSON.stringify()将参数对象转为字符串
- 存储到本地存储中
- 在组件加载时，从本地存储中读取字符串并使用JSON.parse()将其转为参数对象

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zyk1036

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue2路由守卫：解决路由传参页面刷新后参数消失的问题

l_q_l的专栏

08-24

3272

sessionStorage和localStorage都是HTML5提供的Web Storage API的一部分，用于在客户端存储数据。它们的主要区别在于数据的生命周期、存储的持久性以及适合的应用场景。sessionStorage适合存储临时数据，而localStorage适合存储需要长期保存的数据。两者都有5MB的存储空间限制，且只能存储字符串类型的数据，但可以通过序列化和反序列化的方式存储其他类型的数据。

Vue - 完美解决 Router 路由跳转传参（对象 / 数组）目标页面刷新后参数丢失问题，无论如何刷新页面参数都会存在不会消息的解决方案（详细示例代码，一键复制运行）

🏆 前端领域优质创作者

03-23

5464

前言例如，有个列表页，点击后携带参数进入详情页，当刷新详情页后，携带的参数就获取不到了。我们要的是，无论怎么刷新目标页面，都不会出现获取不到的情况，如下图所示：解决方案如果通过query的方式传递对象或数组，在地址栏中会被强制转换成[objectObject]，所以获取不到。但您可以通过将对象参数，通过JSON.stringify()方法进行转换，在接收页（目标页）使用JSON.parse()再转回来。 //列表页 constdata={type:'a1

1 条评论您还未登录，请先登录后发表或查看评论

vue 在IE浏览器路由携带参数超过限制长度怎么解决

weixin_39818813的博客

10-18

6664

最近在做IE浏览器兼容的时候，发现从前一个页面带的参数过多的话，在IE浏览器里面，是不能正常跳转到下一个页面的。原因是IE浏览器对路由的限制长度为2kb。解决：路由传参时放弃get方式，采用post传参的方式。 post方式页面跳转 //由于动态路由也是传递params的，所以在 this.$router.push() 方法中 path不能和params一起使用，否则par...

vue 跳转路由，带的参数问题

web_zq的博客

07-08

460

由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

3123

前言我们在开发项目中经常会遇到一种问题，就是在前端页面跳转时传递某些参数，通常我们是通过路由传递的，但是如果数据量很多的情况下，会造成路由非常的长，如果在大的话甚至会超出地址栏URL的最大限度，这就狗带了．最近手头上一个项目的前端刚好遇到这个问题，该项目前端用的是vue2.x．不是什么大问题，但是之前没有认真想过解决办法，于是将解决思路记录下来了．地址栏URL最大限度首先我查了不...

【Vue】路由的跳转、传参问题

weixin_43790653的博客

06-27

3538

【Vue】路由的跳转、传参问题

页面跳转传参：参数过长（cookie，url , AngularJs controller 传参实现）

yesicatt的博客

06-12

8708

页面跳转传参：参数过长（cookie传参，url 传参, AngularJs controller 传参实现），页面刷新参数保留

小程序路由管理：页面跳转与参数传递全解析

小程序开发

05-11

1060

页面跳转的5种基础方式及其内存管理差异8种参数传递技术的实现原理与适用场景页面栈结构对路由性能的影响机制路由操作与生命周期钩子的联动关系复杂业务场景下的路由优化策略核心概念：解析页面栈模型与路由基本原理跳转技术：分场景讲解5种跳转API的实现差异传参方案：对比8种参数传递方式的适用场景实战案例：演示电商、工具类小程序典型路由场景优化策略：提供性能优化与异常处理最佳实践页面栈：小程序维护的内存数据结构，存储当前打开的所有页面实例，遵循后进先出原则路由操作。

路由跳转时携带参数

07-13

[^2]: Vue路由跳转传递参数 [^3]: Vue3路由跳转与传参 [^4]: vue3路由跳转传递参数： params传参接收不到？</think># Vue3 路由跳转与参数传递详解在 Vue3 中，路由跳转和参数传递是开发单页面应用的核心功能。...

vue动态路由页面不跳转

最新发布

08-13

在 Vue 项目中配置动态路由后，如果出现页面无法跳转的情况，通常与路由的注册方式、组件加载方式以及 Vue Router 的行为有关。以下是一些常见原因及对应的解决方案。 #### 1. 确保正确注册动态路由动态添加路由...

跳转传多个参数（很多很多个）

Joey3的博客

11-01

472

参数说明：跳转的时候携带参数（传过去的实质上是字符串，在接收的地方（B界面）需要转换） A界面 B界面

vue通过$router.push带参数跳转路由

6块腹肌的博客

08-25

1955

方法如下： 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

8253

vue传递参数有多种，据我了解、熟悉的其中两种总结如下：一、组件通过query来传递flag参数为1，相当与在 url 地址后面拼接参数例如：localhost:8080/house?flag=1。具体实例如下：首页点击house.vue页面如下取值：测试路由传参{{ this.$route.query.flag}}此种方法通俗，明了，但是缺点是参数直接展示在了请求的url里面，一般可以传递一...

vue router页面跳转及传参、Vue获取用户输入到页面的数据在另一个页面使用

m0_61663332的博客

12-28

4687

vue router页面跳转及传参、Vue获取用户输入到页面的数据在另一个页面使用通过路由传参拿到跳转前页面数据并在页面使用传来的数据使用场景：用户在充值页面输入的账号和充值金额，跳转到充值成功页面展示数据！

vue3中传递路径参数有什么限制

weixin_53541596的博客

03-18

654

vue3中传递路径参数有什么限制

vue项目使用button进行页面跳转时路由带参数引起错误的解决办法

码出精彩

06-27

3524

vue项目使用button进行页面跳转时路由带参数引起错误的解决办法1、问题描述2、解决的方法3、原理分析 1、问题描述如图，点击按钮跳转到其他路由会出现带参数的情况（ps：我是用编程式导航进行跳转的，vue编程式导航） 2、解决的方法我是采用控制变量的方法找出问题并解决的。具体是，把可能的错误的代码删除，其他不变，然后重新运行。然后我就找出问题了。如图，我的 button 一开始是这样的，会出现问题。解决方法：如上图，加上type="button"就不会出现路由带参数了。 3、原理分析

vue3 路由跳转携带参数

weixin_50556190的博客

04-12

2891

这种写法防止url地址携带多选的大量数据。

netcore vue页面路径跳转出现404的解决方法，url传参太多导致跳转出现404，全网最全的

weixin_44730759的博客

12-13

236

经过实测有效果

微信小程序页面跳转url传参，对象数据过长问题

qq_26282869的博客

11-27

3619

小程序url传参如果是对象的话需要先用JSON.stringify()转换一下，接受页面在用JSON.parse()再转换回来。但这样传参有一个问题，当对象数据长度过大时会报错，因为url传参时程序把过长的那段数据给截取掉了，导致数据转换回来时格式不对而报错。这时可以再添加另一个API：encodeURIComponent(obj) 和 decodeURIComponent(options.o...