页面刷新query和params参数丢失问题原因

已于 2022-05-23 22:38:08 修改
阅读量1.1k 收藏
点赞数
分类专栏： vue.js 文章标签： vue.js
于 2022-05-23 21:52:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49022197/article/details/124935794
版权

概念-路由对象属性

$route.query 一个 key/value 对象，表示 URL 查询参数。
$route.path 字符串，对应当前路由的路径
$route.fullPath 完成解析后的 URL，包含查询参数和 hash 的完整路径。

分析

当浏览器刷新时，触发导航守卫 beforeEach方法等，只有在 next(path: to.path) 时改变了路由参数

解决方案

将 next(path: to.path) 修改为 next(path: to.fullPath)，这样就不会发生 query 参数消失问题。
在这里插入图片描述

马蹄铁呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
IE11中使用window.open()方法获取不到参数解决方法
江湖小虾米
05-21 1万+
 var selectUrl = USER_SELECT_URL + params.join("&"); var windowName = "PersonSelect" + Math.round(Math.random() * 1000000); var openWindow = window.open(selectUrl, windowName, "h
vue路由传参页面刷新参数丢失问题解决方案(1)，2024年最新web后端开发需要学什么
最新发布
2401_83974064的博客
04-10 499
资料过多，篇幅有限自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**[外链图片转存中…(img-zMdUsInK-1712717542376)]
vue 解决addRoutes动态添加路由，刷新404或空白页
qq_38734668的博客
11-29 1762
转于此作者： https://blog.csdn.net/weixin_43949587/article/details/106281394 查了很多博文，都没解决，唯独看到此文章，试了一下，就解决了头疼的事。 所 以问题都是next的问题，不知道next({ …to.path, replace: true })这个语法干嘛，问题就出在这句话了，本人后来改成 next(to.path)这样，所有的问题都没有了 代码如下： constantRoutes[0].children = routes route
window.open打开新标签跳转传参，params与query
m0_56683897的博客
12-14 1980
但跳转页面但希望新建标签页打开的时候，window.open()是我们最常用的方法，但是如果我不只是跳转，我想携带参数诸如，id，type，该怎么操作呢。
network里查询到了数据,但是headers里没有参数
代码包工头的博客
10-13 630
接口请求成功了,但是看不到参数,也没有任何报错,查询的时候也不生效 该传的参数也都传了,console.log也有数据,后来检查发现js里写接口的时候忘了传参 最开始写的是下面的这样,没有传参,后来发现没有传参,加了参数(上面的)就成功的能看到参数了。 ...
vue-router url刷新后query参数消失
xiaoguizcz的博客
11-17 1242
最近在看公司项目时发现一个bug，有query参数的链接刷新后query参数消失，如下图示例刚看到这个问题很疑惑，为啥刷新之后query会消失不见，感觉平时做的项目也没咋出现过这问题，在找解决方案的过程中也找到了原因。
vue路由传参页面刷新参数丢失问题解决方案
10-16
然而，当页面被刷新时，通过`params`或`route`属性配置传递的参数可能会丢失，这是一个常见的问题。本文将详细讲解这个问题以及如何解决。 首先，Vue Router提供了三种主要的路由传参方式： 1. **Params传参**： ...
vue router使用query和params传参的使用和区别
08-28
本篇文章主要介绍了vue router使用query和params传参的使用和区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue router带参数页面刷新或回退参数消失的解决方法
10-17
主要介绍了vue router带参数页面刷新或回退参数消失的解决方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
深入了解query和params的使用区别
10-16
主要介绍了深入了解query和params的使用区别，路由传参的时候，有俩兄弟，一个叫query，一个叫parmas，你说他们俩长得也不像吧，可这用法实在是太类似了，下面就让我们分别从vue路由和Node接收两个角度讲他们的区别,...
浅析vue-router中params和query的区别
10-15
在 Vue Router 中，`params` 和 `query` 是两种不同的参数传递方式，它们在使用场景和表现形式上有所差异。以下是关于 `params` 和 `query` 的详细解析。 1. 引入方式： - `query` 参数通常与动态路径中的 `path` ...
vue路由跳转页面带参数，刷新时页面参数丢失
喜欢做一些demo，和分享遇到的 BUG
09-25 1095
页面路由跳转传递参数方式： 注意 query里面的不要写对象，写具体的参数，不然传过去下一个页面后，参数刷新就会变成[object,object]。 具体的参数的值先用JSON.stringify转，再接受的时候转回来。 用JSON.parse把获取到的参数转。这样刷新就不会丢失了。 ...
vue-router的query和params的区别/若刷新当前页面params对象里面数据会消失，而query不会
ispaomoya博客
10-12 944
主要讲3点 1.query和params使用区别（重点） 模拟一下路由，假设已经在router.js文件里定义path=‘aaa/index2/’和name='index2' query使用 //当前页面，index1.vue methods:{ //一个点击按钮，事件 btnClick () { this.$router.push({ path:'aaa/index2', //如果不想用path的话，可以用name代
解决路由跳转传参刷新页面后参数丢失
qq_42430038的博客
03-10 1024
1.路由配置 //：参数后不加？的话不传参就不能跳转该页面 2.跳转方法 3.跳到目的页后获取参数 this.$route.params获取的是一个对象，包含所有传过来的参数 再刷新页面就不会丢失参数了
Vue路由传参当传参后刷新导致参数消失问题处理
typhoonpython的博客
04-28 2213
在实际项目中使用字符串拼接，使用iframe跳转链接进行报表展示。 路由传参的时候出现刷新参数丢失问题，具体解决如下： 在进行路由配置的时候使用如下设置进行的配置，用的params方法进行参数传递。 { path: 'data-detail-edit/:type', component: () => import('@/views/cost/costDetail/index'), name: 'test1' params: { type: 1 }, me
vue中路由传参刷新页面后参数丢失的问题
haoxinqing222的博客
08-12 2656
一般的路由传参 this.$router.push({name:'My',params:{id:'123'}}) this.$router.push({path:'/my',query:{id:'123'}}) 对于传参过后，跳转到的页面进行刷新行为，参数丢失问题，一般有下面几种方法 用query传参，query类似于get传参，参数会在url中显示，例如： this.$router.push({path:'/my',query:{key: []}}) 接收参数： this.$route.query
vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题
有梦想的咸鱼前端
09-04 6517
最近项目中涉及到跨页面传参数和后台进行数据交互，看到需求之后第一反应就是用路由传参来解决；Vue中给我们提供了三种路由传参方式，下面我们一个一个的来看一下： 方法一：params传参： this.$router.push({ name:"admin", 　　　　//这里的params是一个对象，id是属性名，item.id是值(可以从当前组件或者Vue实例上直接取) ...
next.js中url参数在页面刷新后获取不到问题的解决方案
玖尘的博客
01-12 1310
next.js中url参数在页面刷新后获取不到问题的解决方案
Vue路由params、query参数丢失解决
见贤思齐焉，见不贤内自省
03-03 4742
在vue中路由传参有两种形式：1.params；2.query 解决办法：sessionStorage或者localStorage 两者的区别：localStorage是永久保存不清除一直存在,sessionStorage关闭客户端即清除 首先有两个页面，通俗点页面一和页面二； 页面一给页面二传递路由参数 params参数 this.id = 666 this.$router.push({ name: '页面二', params: {
vue刷新params参数丢失 如何解决
07-08
在Vue中，当你刷新页面时，params参数会丢失，这是因为params参数是存在于路由中的，而刷新页面会导致路由重置。要解决这个问题，你可以考虑以下两种方法： 1. 使用query参数：将参数从params改为query。在路由定义...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值