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

最新推荐文章于 2024-08-24 09:00:00 发布
最新推荐文章于 2024-08-24 09:00:00 发布
阅读量382 收藏
点赞数
分类专栏： Vue-Router 文章标签： Vue路由传参
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33601443/article/details/102591500
版权

在刷新后，使路由传递的参仍然存在

	this.$router.push({ name: 'test2', query: { id: '1' }})

获取参数

	this.$route.query.id

原理是通过在路径上面绑定参数传递。

如果传递的是对象，那么刷新后可能会存在[Object,Object]的情况，

解决方法: 再传参的时候先转为字符串，然后再转为对象

二水你要努力啊
关注
专栏目录
vue路由传参页面刷新参数丢失问题解决方案
10-16
主要介绍了vue路由传参页面刷新参数丢失问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue中路由传参刷新页面后参数丢失的问题
nyf_unknow的博客
04-28 1393
项目场景： 大数据中台修改表格数据 问题描述 编辑表格行数据，跳转到编辑页面，刷新页面数据丢失 解决方案： 在表格页面点击编辑按钮时将要传递的参数用JSON.stringify(row)转换成字符串 //编辑属性 editAttribute(row) { this.$router.push({ path: "/independent/...", query: { // url的参数, 类似ge
Vue2路由守卫：解决路由传参页面刷新后参数消失的问题
最新发布
l_q_l的专栏
08-24 1803
sessionStorage和localStorage都是HTML5提供的Web Storage API的一部分，用于在客户端存储数据。它们的主要区别在于数据的生命周期、存储的持久性以及适合的应用场景。sessionStorage适合存储临时数据，而localStorage适合存储需要长期保存的数据。两者都有5MB的存储空间限制，且只能存储字符串类型的数据，但可以通过序列化和反序列化的方式存储其他类型的数据。
vue路由跳转携带参数刷新页面是否消失的问题（query / params）
Yugoup的博客
03-24 815
1.刷新页面后丢失携带的参数 //这里使用name进行路由的跳转，携带参数时用params，跳转后，url上不会出现参数，刷新页面后参数会丢失 this.$router.push({ name: "page1", params: { code: this.code }, }); //接收参数时用 this.$route.params.code 2.刷新页面后依旧保留参数 //但是，携带参数时用query，跳转后，url上会拼接参数，刷新页面后参数不会丢失，依然是那个带参数的url this.$ro
详解解决Vue相同路由参数不同不会刷新的问题
12-29
通常情况下我们喜欢设置keepAlive 包裹 router-view <div id=app> <keep> <router></router> </keep> </div> 同时在created 中触发请求，在路由参数不同的情况下并不会执行对应的操作。 解决方法： 1、给 router-view 设置 key 属性为路由的完整路径 <keep> <router key=$route.fullPath></router> </keep> 这种方法我觉得应该
Vue第25篇，Vue项目使用query传参后，页面刷新数据不丢失（query接收参数后，页面刷新数据不丢失）
weixin_65793170的博客
02-08 4146
在实际应用中，我们在使用query传递参数时，跳转之后，在新的页面对这个参数进行接收，但是在其页面使用时，刷新页面后数据会丢失，第一次跳转时数据是正常显示的，但第二次刷新页面数据会变为[object object]，针对此问题，这里来记录一下。
Vue路由传参当传参后刷新导致参数消失问题处理
typhoonpython的博客
04-28 2238
在实际项目中使用字符串拼接，使用iframe跳转链接进行报表展示。 路由传参的时候出现刷新参数丢失问题，具体解决如下： 在进行路由配置的时候使用如下设置进行的配置，用的params方法进行参数传递。 { path: 'data-detail-edit/:type', component: () => import('@/views/cost/costDetail/index'), name: 'test1' params: { type: 1 }, me
vue路由传参 vue路由传参
11-18
- 刷新页面后，如果未在路由配置中定义的参数将会丢失，因为浏览器不会保存这部分信息。 - 只适用于已知的、固定的参数名，通常用于唯一标识如 ID。 ### 3. 混合使用 Query 和 Params 有时，你可能需要结合使用 ...
vuer路由router跳转传递参数刷新后数据无法获取
qq_45094682的博客
11-02 2785
1.第一种方法 页面刷新数据会丢失 我们学习过vue路由之后知道，vue传参有几种方式 1.vue路由params是根据name跳转的，通过params来传递参数 2.vue路由query是根据path跳转的，通过query来传递参数 通过路由属性中的name来确定匹配的路由，通过params来传递参数。 methods：{ toLink(id) { this.$router.push({ name: 'systemConfig', params
路由传参——刷新页面会数据丢失
qq_50276105的博客
03-06 1934
但是用到this.$route.query.ObjectData的页面，刷新后会导致this.$route.query.ObjectData数据丢失。【2】传递对象，或者含有对象的数组，在传之前先把数据转换成字符串再进行传递--》JSON.stringify()，获取的时候把字符串转换成对象--》JSON.parse()当index页面刷新之后，再打印 this.$route.query.ObjectData，会得到一个[Object Object] 未知数据，导致报错！
vue params传参刷新网页数据丢失解决方法
muzidigbig的博客
07-28 2645
上面没用到localStorage是因为如果用户跳转到页面A后，直接关闭浏览器，再打开浏览器输入网址，就能从本地存储找到该数据，但是。存储在localStorage里的数据如果不是主动去清除的话，就算浏览器关闭了，下次打开浏览器他还是会存在。上面的做法虽然满足了刷新网页数据不丢失，但是没满足第二个条件，数据出现在url地址里了。，这样虽然可以让数据不出现在url地址里，但是刷新网页会导致数据丢失。传参时，由于数据是拼接在url地址后面的，所以刷新网页不会导致数据丢失。传参，数据不会出现在url地址里。
vue项目中传递参数跳转路由，刷新或从下级页面返回后参数消失解决方案
weixin_45106076的博客
07-25 1898
项目中碰到一个问题，从页面A->B->C之间携带参数跳转，刷新B页面或从C页面返回B页面时，A传给B的参数消失了，变成了undefined。
router路由跳转使用query传递参数刷新后数据无法获取
lindali1115的博客
04-24 4513
代码示例 路由跳转代码 if (data.code === 200) { this.$router.push({ name: 'admin/', query:{ accountInfo:data.data, } }) } 获取参数,初次载入 console.log(this.$route.quer...
vue路由传值与重调本路由改变参数
like896369216的博客
04-26 5852
vue路由传值与重调本路由改变参数重新渲染页面
vue 解决addRoutes动态添加路由后刷新失效问题(跳转“404”页面)
热门推荐
JC.Lin的博客
12-21 2万+
这篇文章主要介绍了vue 解决addRoutes动态添加路由后刷新失效问题，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 前言 某些场景下我们需要利用addRoutes动态添加路由，但是刷新后就会失效，前段时间项目里刚好遇到了这个应用场景，所以就花时间研究了一下，做下分享跟记录，说的不对的地方，请大家指正。 应用场景：用户a登录进系统，用户挑选店铺后跳转到店铺详情首页，进入到动态...
vue动态路由刷新丢失解决方案
BLUESKYHOST的博客
11-17 8501
问题出现的问题 动态路由添加刷新页面出现空白页面或者404页面 因为界面刷新导致动态路由丢失，所以是空页面或者404 我添加动态路由了怎么还剩刷新依旧是空白页面呢？ 因为动态路由添加后需要是新导航才会生效 解决方案 需要判断当前页面是否刷新了 本地存一个当前访问页面的路由下次刷新用来判断当前是否是页面刷新 使用vuex来存储动态路由数据，如果是空就是刷新页面了 案例 使用本地存储 使用路由拦截器跳转之后存数据 //存访问路由 router.afterEach((to, from) =
vue-router 动态路由 warning:Route with name ‘Menu‘ does not exist
News777的博客
10-10 1436
vue-router 动态路由 warning:Route with name 'Menu' does not exist
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、付费专栏及课程。

余额充值