vue路由跳转传参只能接收第一次传递的值解决办法

最新推荐文章于 2024-07-04 16:52:52 发布
原创 最新推荐文章于 2024-07-04 16:52:52 发布 · 1.1k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文讲述了如何通过监听Vue Router的 '$route' 事件，在B页面接收到参数后自动销毁重定向，确保每次跳转都能正确传递参数。

当我从A页面跳转（携带参数）到B页面的时候，B页面只能接收到第一次跳转过来传递的值，很纳闷是什么原因，随后解决办法是监听B页面的router，并且销毁，废话不说，上代码

    watch:{
      '$route'(newVal,oldVal){
        if(newVal.name != 'B') {
          this.$destroy();
        } else {}
      },
    },
Vue2路由守卫：解决路由传参页面刷新后参数消失的问题
l_q_l的专栏
08-24 3334
sessionStorage和localStorage都是HTML5提供的Web Storage API的一部分，用于在客户端存储数据。它们的主要区别在于数据的生命周期、存储的持久性以及适合的应用场景。sessionStorage适合存储临时数据，而localStorage适合存储需要长期保存的数据。两者都有5MB的存储空间限制，且只能存储字符串类型的数据，但可以通过序列化和反序列化的方式存储其他类型的数据。
Vue2路由：手动配置使用路由&路由嵌套、路由动态传参（:参数，query、props）、编程式导航（back、go）、导航守卫
欢迎来到长风沛雨的博客
03-05 6861
导航守卫可以控制路由的访问权限例如：在首页，点击导航进入后台主页，需求是在用户登录账号以后才可访问但是，在未登录的情况下，是可以直接访问到Main后台主页的就需要通过导航守卫来控制是否可以跳转如果没有登录，访问main主页的话，就会强制跳转到登录页面。
vue router 同一页面不刷新的问题
Yangliwei的博客
02-22 2632
1,使用key 在router-view设置动态的key就会每次都刷新了 <router-view :key="$route.params.Id" /> 2,使用beforeRouteUpdate beforeRouteUpdate(to, from, next) { console.log(to, from); next(); }, 官网地址:ht...
vue3 路由传参只传一次问题的解决方法
qq_45662523的博客
08-29 1288
vue3 路由传参只传一次问题的解决方法
router编程式导航（push-replace）及同一事件触发多次路由跳转报错
m0_68320270的博客
07-26 887
1.路由跳转 2.push与replace的区别 3.路由传参（name-path） 4.多次路由跳转报错
vue路由query传递一个对象，第一次可以获取得到，刷新后就获取不到了
weixin_45899022的博客
07-07 1504
https://segmentfault.com/q/1010000010256764
使用vue让某个请求只触发一次，路由跳转页面刷新都不会再请求
m0_46577631的博客
05-25 4453
最近有一个需求就是让用户初始进入页面时使用的areaCode是从用户角色列表里面user字段所对应的areaCode，后面操作了地区选择后切换路由或者是其他操作都不会再切换地址和当前地址的areaCode，因为正常的情况我们一般会在vue的生命周期mouted里面去获取下一用户的角色信息去提前获取areaCode，但是我们一旦切换页面或者切换路由后，再回到这个页面mouted里面获取角色信息的方法又回触发，所以这是我们需要去解决的。所以我想到了用一个标识去识别该方法第一次触发过，后续就不会再触发了。接下来我
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
10-15
总之，解决Vue中使用bus总线时第一次路由跳转数据未成功传递的关键在于理解Vue的生命周期，并合理安排`$emit`和`$on`的执行时机。正确地使用生命周期钩子可以避免这个常见的陷阱，确保数据在组件间顺畅传递。
vue路由、传参、接收方式、跳转、router、path、name、router-link、to、replace、push、query、params
st646889325的博客
07-04 951
htmlname，path都行，建议用name。注意：router-link中链接如果是斜杠/开始，那么就是从根路由开始，如果开始不带斜杠/，则从当前路由开始。</</query传参数类似于get请求，url后面会显示参数，可以不配置路由。params传参数类似于post请求，路由配置path:"/home/:id"或者path:“/home:id”。不配置path，第一次可请求，刷新页面id会消失，配置path，刷新页面id会保留。</</取参。
Vue路由传参（使用query传参页面刷新数据丢失问题）
...
04-10 1707
vue路由传参（使用query传参页面刷新数据丢失问题）
使用vue-router携带不同参数多次push到一个页面时请求 不重新触发问题 ,只有第一次触发
LZHH_2008的博客
07-24 3355
1. vue跳转 this.$router.push({ path: '/user/userDetils', query: { id: JSON.stringify(val.id), name: JSON.stringify(this.searchData.name), status: val.status } }); 2. 配置路由 var subRouter = function (Main) { return [ { pa.
解决路由传参只生效一次的问题
weixin_60214098的博客
12-13 2286
在接受参数的路由 进行监听 watch:{ $route(newVal,oldVal){ if(newVal.name!="/传参的路由"){ this.$destroy(); }else{ } }, },
window.performance.navigation.type
热门推荐
风吹麦浪的专栏
07-01 1万+
　performance.navigation.type（该属性返回一个整数值，表示网页的加载来源，可能有以下4种情况）： 　　0：网页通过点击链接、地址栏输入、表单提交、脚本操作等方式加载，相当于常数performance.navigation.TYPE_NAVIGATE。 　　1：网页通过“重新加载”按钮或者location.reload()方法加载，相当于常数performance.navigation.TYPE_RELOAD。 　　2：网页通过“前进”或“后退”按钮加载，相当于常数performan
嵌套iframe加载的内容就第一次显示的问题
weixin_42332641的博客
06-15 1978
iframe里面又嵌套了一个iframe，就第一次点击的时候页面显示，其他在点击页面不显示，检查元素时，内容都在，只是不显示，在网上找个方法，重新加载一下子页面 原地址：https://blog.youkuaiyun.com/weixin_33827731/article/details/86054153 $(function(){ if (window.location.href.toLowerCase().indexOf("loaded") < 0) { window.locatio
解决数据回填只出现第一次请求数据的三种方式
weixin_48837605的博客
08-14 282
遇见的问题: 点击编辑按钮之后,第一次还能正常的回填数据,但是无论是点击哪一项的编辑部门,都还是之前的数据,无法改变 原因:点击右上角的X或者弹层中的取消按钮之后,弹层只是隐藏了,等再次点击编辑的时候显示的还是第一次请求的数据 解决方式有三种,请查收! 方式一:使用v-if,v-if是将组件进行删除,然后点击编辑部门之后,就是重新的发送请求,获取数据 优点:简单粗暴,代码量少 缺点:反复的请求数据,浪费性能 方式二:this.$nextTick的使...
vue 第一个页面加载时将表第一行参数传给第二个页面进行初始化
smilelove520的博客
02-24 1086
项目中有很多多表多页面级联显示的业务,每次都需要点击行来触发另一个页面的加载,这样页面看起来效果不是很好。现需要在第一个页面加载完毕根据表中第一行的内容自动触发别的页面初始化,使用watch来监听第一个页面表格数据变化进行调用第二个页面方法,记录一下供以后使用。 watch 监听 父页面 <div class="title-font">药品申请列表</div> <el-table ref="applyTable" v-loading="loading" :data="app
vue-$router-路由传参的3种方法详解
郝峰vip的博客
12-06 2457
前沿 最近，由于工作需要，需要去面试一些前端，由于自己是那种实操型的程序猿，不擅长这方面，但是没办法，只能硬着头皮上，第一次有些紧张，后来慢慢就好了，在过程中，发现面试别人自己可以系统的学到很多知识，比如说有些原理性的东西，系统的知识，就可以在学习一遍，并且比之前理解的更透彻了，所以说，什么时候都可以学习，加油吧，骚年。 下面主要说一下vue $router 路由传参的3种方法详解，里边包...
vue route query获取参数
风烟
05-10 1512
当query某个key只有一个的时候区的值就是一个字符串 例如下面这个链接 http://localhost:8080/xxx.html#/xxx?aaa=bbb this.$route.query.aaa为bbb 如果一个值重复多次 http://localhost:8080/xxx.html#/xxx?aaa=bbb&aaa=bbb this.$route.query.aaa为["bbb", "bbb"] ...
vue中不同路由共用同一个组件，缓存数据。不同路由第一次进入走加载，二次缓存
WWW_share8的博客
03-22 6665
背景：后端根据不同路由返回不同数据，使用一个组件去渲染页面 需求：一，每次新路由进入的同一个组件都要走生命周期，获取后端数据。二，第二次点击需要缓存数据，希望之前输入的数据还在。 难点说明： 1，由于vue设计时，同一个组件二次进入是不会再次走生命周期，目的是为了提高渲染效率等 2，keepAlive缓存同一个组件 会出现不生效的问题 解决： 关于一：解决方法网上但部分是根据路由在添加一个时间作为key来解决。 但我今天的解决办法是一二一起解决。 首先，先解决为什么keepAlive不能缓存
vue2.0 页面路由跳转 多值传参 页面刷新 参数也可以保留
最新发布
06-13
如果不配置path，第一次可请求，刷新页面id会消失。因此，对于多参数传递并保留，有几种方式：1.使用query参数：简单，参数在URL中可见，刷新保留。2.使用params参数：但必须在路由配置中定义所有参数变量，如`path:...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值