vue 页面跳转导致路由参数丢失

最新推荐文章于 2024-05-13 18:44:10 发布
最新推荐文章于 2024-05-13 18:44:10 发布
阅读量1.2k 收藏 1
点赞数 1
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/NOyesNONO_/article/details/126361061
版权

背景

在这里插入图片描述
问题是页面二的参数丢失：
页面二列表的查询条件是由页面一路由参数query带过来的，
从页面二点击详情进入页面三，再从页面三点返回到页面二时，此时页面二获取到的路由参数是页面三的，而不是页面一的了，所以查询条件丢了，获取的列表数据就错了。

解决方法

在这里插入图片描述

将页面二获取到的路由参数传给页面三，当从页面三返回页面二时，再传回去。这样页面二所接受的路由参数就一致了。

我觉得这样挺笨的 … 有好的方法的话，一定留言告诉我，感谢哈哈！！

NOyesNONO_
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue - 完美解决 Router 路由跳转传参（对象 / 数组）目标页面刷新后参数丢失问题，无论如何刷新页面参数都会存在不会消息的解决方案（详细示例代码，一键复制运行）
王佳斌
03-23 4493
前言 例如，有个列表页，点击后携带参数进入详情页，当刷新详情页后，携带的参数就获取不到了。 我们要的是，无论怎么刷新目标页面， 都不会出现获取不到的情况，如下图所示： 解决方案 如果通过 query 的方式传递对象或数组，在地址栏中会被强制转换成 [object Object]，所以获取不到。 但您可以通过将对象参数，通过 JSON.stringify() 方法进行转换， 在接收页（目标页）使用 JSON.parse() 再转回来。 // 列表页 const data = { type: 'a1
vue单页面实现当前页面刷新或跳转时提示保存
12-12
前言 最近公司vue项目中有一个需求，需要在当前页面刷新或跳转时提示保存并可取消刷新，以防止填写的表单内容丢失。刚开始思考觉得很简单，直接在Router的钩子中判断就好了，但是会发现还有新的问题存在，浏览器刷新和当前页面关闭的时候无法监听，最终用[removed]成功解决，所以用这篇文章简单记录下整个解决过程。 vue-Router的钩子： 路由钩子可以分为全局的，单个路由独享的以及组件级别的，解决上述需求只用到了组件级别的路由钩子，所以本文只介绍组件级别的路由钩子，全局的和单个路由独享的路由钩子有需要的同学可以去vue-router官网查看介绍： 组件级别路由钩
2024年前端最新vue路由传参页面刷新参数丢失问题解决方案(2)，2024年最新2024阿里、网易、京东等大厂最新Web前端面试题
最新发布
2401_84412050的博客
05-13 695
以上两种传参方式基本上可以理解为ajax中的post请求方式，参数都是不可见的，但是上面两种方法都有一个弊端，就是当页面刷新了是获取不到参数值的，那么有没有一种方法是页面刷新之后参数依然存在呢？router.push方法里面路径带的是值，路由配置项那里带的是变量名(属性名)来实现的对应；通过params传递参数，如果我们想获取id的 参数值，我们可以通过this.12)WEB应用从服务器主动推送Data到客户端有那些方式？4)如何区分数组对象，普通对象，函数对象。4)如何区分数组对象，普通对象，函数对象。
vue项目中传递参数跳转路由，刷新或从下级页面返回后参数消失解决方案
weixin_45106076的博客
07-25 1821
项目中碰到一个问题，从页面A->B->C之间携带参数跳转，刷新B页面或从C页面返回B页面时，A传给B的参数消失了，变成了undefined。
解决vue3项目跳转同一页面数据不刷新的问题
qq_44313787的博客
05-06 7279
原因：router-view使用了keep-alive组件，会被缓存，而vue-router的切换不用于传统的页面切换。是路由之间的切换，组件之间的切换，引用相同组件的时候，会被直接调用缓存里面的而不会调用created()，onMoun ted()函数。如图所示：要实现的功能是点击每一个tabs栏下的更多按钮，会跳转到“消息中心”页面，这是点击不用的“更多”按钮，跳转的路由页面是同一个，但是要求页面里的消息类型下拉选择框和列表数据要刷新，显示不同的数据。现在的问题是：页面跳转数据不刷新。
vue子路由复用组件后，切换路由时页面数据不刷新解决方法
sjp991012的博客
10-24 535
【代码】vue子路由复用组件后，切换路由时页面数据不刷新解决方法。
Vue页面跳转传递参数及接收方式
10-14
在Vue.js应用中，页面之间的跳转和参数传递是非常常见的操作。这有助于在不同组件间共享数据，特别是在大型单页应用程序（SPA）中。本文将详细介绍两种在Vue中实现页面跳转并传递参数的方法，以及如何接收这些参数。...
vue路由传参页面刷新参数丢失问题解决方案
10-16
总的来说，面对页面刷新导致的参数丢失问题，Vue开发者应根据实际需求选择合适的方法。无论是使用Vue Router的Query传参，还是结合浏览器的本地存储，关键在于理解各种方法的适用场景，并灵活运用。在开发过程中，...
vue路由跳转传递参数的方式总结
10-15
在实际开发中，我们常常需要在跳转路由时传递参数，以便在新的页面中使用这些数据。本文将详细介绍Vue路由跳转时传递参数的三种主要方式，并分析它们的特点和适用场景。 1. 动态路由传参 动态路由是一种在路由路径...
vue 解决addRoutes动态添加路由后刷新失效问题
08-27
在 Vue 项目中，我们经常需要使用 addRoutes 动态添加路由，但是在刷新页面后，这些动态添加的路由就会失效。下面我们来介绍如何解决这个问题。 应用场景 在某些场景下，我们需要利用 addRoutes 动态添加路由，...
vue element 关闭当前tab 跳转到上一路由操作
10-15
以上就是关于"Vue Element关闭当前tab并跳转到上一路由操作"的详细解答，以及处理列表页跳转后返回页码问题的方法。在实际开发中，确保充分理解Vue Router和Vuex的工作原理，将有助于更好地管理应用的状态和路由，...
vue3中使用路由功能，页面路由内容不能正常显示，并且路由标签不能点击
weixin_51174757的博客
09-07 1945
插件的执行应该在mount钩子之前，将代码的顺序调整一下，页面就可以正常显示，并且控制台也不再有warn报错。上网查询了很多帖子，并没有能解决这个问题，突然想到是不是main.js文件中代码的执行顺序有问题。最近在用vue写项目，在配置路由时碰到了一个问题。
vue路由跳转之后保留当前页面数据不变动
热门推荐
qq_39894545的博客
11-09 1万+
Vue路由跳转到新页面之后，返回旧页面保持状态不变_q879936814的博客-CSDN博客
vue-router路由导航url已改变，但未跳转至对应组件
mmsmsmm的博客
08-25 3509
vue-router路由导航url已改变，但未跳转至对应组件
Vue-element-admin 标签页切换时，表单数据丢失问题
DevZYD的博客
07-12 2811
一、问题现象： 当打开多个标签页时，在一个页面输入框输入内容筛选搜索了数据，切换到其他页面再切换回搜索数据的页面，将会发现筛选查询输入框内容已丢失。 二、导致问题出现的原因： 路由配置name参数和对应访问vue文件内的name参数值不同导致 三、解决方法： 将路由配置 name参数 和 对应访问vue文件内的name参数改为一样即可，另外一方面，设置路由配置meta参数对象中noCache为false ...
vue管理后台切换页签缓存查询条件
Dream_Haunting的博客
05-26 894
需求描述 vue管理后台在路由跳转时进行缓存，再次返回该路由还是之前的查询条件 解决方案： 查看了vue-element-admin文档，发现这段话： 由于目前 keep-alive 和 router-view 是强耦合的，而且查看文档和源码不难发现 keep-alive 的 include (opens new window)默认是优先匹配组件的 name ，所以在编写路由 router 和路由对应的 view component 的时候一定要确保 两者的 name 是完全一致的。(切记 name 命名
vue跳转 路由和参数都变化，但是页面没有更新
xinxin_zhu的博客
09-15 3665
1问题描述 页面 A->B 从浏览器回退到 A ,然后 A->C ,然而C 的页面内容是B的，C页面的 路由地址和参数都是对的。 2.解决方法，我是重新刷新一下，但是这个不好有刷新的痕迹。 1）用watch监控 $route 监控不到 ,都是空的 watch:{ $route(to, from) { console.log("----------"); console.log(to); console.log(from);
vue3 碰见的坑！！！ 页面跳转回原页面不显示的问题
lei_jobs的博客
11-24 582
然后发现，当页面切换到else的内容的时候，跳出当前路由，跳向其他路由，页面就不显示。刚开始写的时候，因为VUE3说可以不用在最外层包裹根元素，所以就没有用div包裹。后来再外边包裹了一个根元素，就没有这种问题出现了。
vue3中使用路由功能，地址跳转了，但是页面显示空白
qingyu3044的博客
04-14 4465
按照官方文档，以及网上经典教程都测试了几次，就是不成功。而且还报错网上查了很久，有说是路由地址冲突的原因，又说是mount调用顺序的原因，结果都不是，经过尝试是modules不匹配的原因。
vue 页面返回参数丢失
09-03
当页面返回参数丢失时，通常是由于以下几个可能原因导致的： 1. 页面跳转方式不正确：在使用vue进行页面跳转时，应该使用router的方式进行跳转，而不是简单的浏览器的返回功能。如果直接使用浏览器的返回按钮或者history.go(-1)等方式返回上一页，可能会导致页面状态丢失。 2. 参数传递方式不正确：在进行页面跳转的同时，可能需要将参数传递给目标页面。在vue中可以通过query参数、params参数或者组件之间传递props参数的方式进行参数的传递。如果在跳转过程中未正确传递参数，返回时就会出现参数丢失的情况。 3. 缓存机制导致的参数丢失：vue-router默认开启了页面的缓存机制，即每次离开一个页面时，该页面的状态会被缓存起来。当再次返回到该页面时，会直接从缓存中恢复该页面的状态，而不是重新加载页面。这时如果希望返回时参数不丢失，可以考虑在路由配置中设置该页面的缓存禁用。 综上所述，解决vue页面返回参数丢失的方法主要是通过正确的跳转方式、参数传递方式以及合理的缓存策略来解决。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值