beforeRouteLeave next死循环 跳转路由带参数

于 2023-07-11 15:01:31 发布
阅读量409 收藏 1
点赞数 2
文章标签： javascript vue.js es6 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiaxue1018/article/details/131660112
版权
文章讲述了在Vue应用中遇到的路由导致的死循环问题，解决方案是通过添加判断条件避免重复执行，并使用to.query属性进行参数传递，这种传递方式的参数不会显示在URL地址栏，但可以在组件内通过this.$route.query访问。
摘要由CSDN通过智能技术生成

先上代码截图：

这样会进入死循环，走到next的时候就会再次执行一遍，一直循环

 

解决办法：

做一下判断，to.path判断当前路由

之后通过to.query.参数名 = 参数，这样来传参就可以了

如下面代码所示

 注意：这个参数不会在地址栏显示，但是可以通过this.$route.query.actived获取到

一个天秤座程序员
关注
前端开发：路由守卫/路由拦截的使用
软贱开发攻城狮
09-30 2396
在前端开发过程中，Vue的生命周期对于开发者来说并不陌生，而且也是经常使用的，不管是在实际开发过程中还是在前端求职面试中都是必备知识点，Vue常用的钩子函数也是非常重要的，重要性不必多说。本文就来分享一下关于Vue的路由守卫相关的使用，尤其是在实际开发中比较常用且重要的知识点，总结分享一下，方便后期查阅使用。在Vue中，官方对于路由守卫的解释就是vue-router提供的路由守卫是用来跳过或者取消的方式守卫路由/导航。
解决vue-router路由拦截造成死循环问题
10-14
主要介绍了解决vue-router路由拦截造成死循环问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
beforeRouteEnter，beforeRouteLeave函数
while(True): print('adorable')
09-26 510
路由route & 数据请求
vue组件独享守卫钩子函数参数详解（beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave）...
weixin_30561425的博客
06-18 411
一样的和前面路由钩子类似的步骤 首先在demo下面的components下面新建一个test.vue组件 test组件代码 <template> <div class="test_box"> <p @click="go">测试组件内部守卫的作用，点击跳到HelloWorld</p> </div> <...
vue组件独享守卫钩子函数参数详解（beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave）
突维
03-19 807
一样的和前面路由钩子类似的步骤 首先在demo下面的components下面新建一个test.vue组件 test组件代码 <template> <div class="test_box"> <p @click="go">测试组件内部守卫的作用，点击跳到HelloWorld</p> </div> </temp...
beforeRouteLeave
热门推荐
静静的博客
04-08 2万+
有个需求：跳转到指定页面时再返回当前页面时保留之前搜索数据 否则清空搜索条件 用到了beforeRouteLeave 记录下来 beforeRouteLeave(to, from, next) ： 离开路由之前执行的函数,可用于页面的反向传值，页面跳转。 beforeRouteLeave (to, from, next) { this.$log.info(to, from,'route...
vue 中 beforeRouteEnter 死循环的问题
10-17
文章中提到了一个解决死循环的方法，即使用一个全局变量来控制数据请求和路由跳转的顺序。在beforeRouteEnter守卫中，可以设置一个标记变量，用来判断是否是首次进入该路由。如果不是首次，就直接调用next()来结束...
vue路由守卫及路由守卫无限循环问题详析
10-16
例如，当未正确处理 `next` 函数调用时，可能会陷入死循环。为避免这种情况，必须确保你的守卫逻辑清晰且正确。 防止路由守卫无限循环的方法有几种： 1. **正确调用 `next`**：确保在所有情况下都调用了 `next` ...
vue 路由守卫死循环
最新发布
10-18
Vue 路由守卫死循环是指在使用 Vue 路由守卫时出现了循环调用的情况。...总之，要避免路由守卫死循环，我们需要正确地处理守卫函数中的 next 方法调用，并在组件内部使用路由跳转方法时进行条件判断，以避免循环调用。
Vue | 路由【路由的简介 +嵌套（多级)路由+路由的query,params参数+命名路由+路由的props配置+router-link的replace属性】
不爱吃菜的菜菜的博客
07-24 1164
vue-rooter是vue的一个插件库，专门用来实现SPA应用。
vue 实现A页面跳转到B页面，B页面再携带参数返回到A页面 beforeRouteLeave
weixin_45227188的博客
11-19 2224
A页面跳转到B页面：this.$router.push("/B"); mounted(){ if(this.$route.query.info){ //接收B页面传回来的参数,并且执行 this.query(); }else{ //判断是宫格入口进入 this.init(); } } B页面返回A页面： //和methods同一级,离开路由之前执行的函数,可用于页面的反向传值，页面跳转。 beforeRouteLeav...
02导航守卫 （2018/11/28）
baitong0848的博客
09-12 213
导航守卫 (进入到每个路由之前判断路径) “导航”意味着路由正在发生改变 正如其名，vue-router提供的导航守卫主要通过跳转或取消的方式来守卫导航。 植入导航守卫的方式有三种：全局的, 单个路由独享的, 或者组件级的。 参数（params）或查询字符串（q...
vue.组件导航守卫 beforeRouterEnter, beforeRouteLeave,beforeRouteUpdate详解
11-25 3089
组件导航守卫:在某个组件的js中编写导航守卫钩子函数 作用范围:只有当前这个组件 to:去往的地址 form:从哪里来 (1)beforRouteEhter:路由规则指定的组件访问之前自执行 写next();执行当前页面 (2)beforeRouteLeave:路由规则离开时自动触发 next中不能写参数 (3)beforeRouteUpdate:动态路由 只有参数发生变化是才执行(通俗理解...
vue 离开路由事件beforerouteleave 指定路由会死循环（算踩坑吧）
会点php的前端小渣渣
02-22 2685
因为业务有需求吧。。。很久才用一次这个离开路由，呵呵了。（看来有空得看看这个beforeRouteLeave的源码讲解了） 先看下我以为的离开路由： beforeRouteLeave(to, from, next) { //console.log('to--->', to.path, this.isModify) if( storage.get('currentDj') && storage.get('currentDj')!='undefined' &
Vue中 beforeRouteLeave离开路由之前要执行的操作
lzfengquan的博客
09-01 1万+
实例 一般在我们各自页面的首选页面进行操作。 首先我们要知道beforeRouteLeave（to, from , next）三个参数的意义 to , 离开之前 from , 到达 next，下一步。 beforeRouteLeave(to, from, next) { // 离开路由之前 ，判断一下是不是跳到下一个页面 // 是否保存当前页面 // console.log(to.path, '查看路径，跳转的路径') const path = '/intelligent-water/wa
路由的守卫和路由之前的传参
qq_59076775的博客
11-23 1650
一.先介绍有那些常见的路由守卫 （1）全局路由守卫 (2) （3）
在vue中，beforeRouteEnter()和beforeRouteLeave()的函数解释
蚁族的奋斗的博客
01-04 1312
1、beforeRouteEnter(to, from, next){ 要执行的代码操作 next(); } beforeRouteEnter：进入路由之前执行的函数。 next();   --》 必须有这个，相当于一个按钮开启一样。 2、 1、beforeRouteLeave(to, from, next){ 要执行的代码操作 next(); } beforeRouteLe...
Vue中模块化路由之后，添加路由守卫beforeEach之后，next传递参数会陷入死循环的问题
wusu0wei的博客
11-14 3338
next传递参数的时候出现的递归问题 本来想做一个测试，写了一个简单的登录注册，想着判断一下登录的token之后做一个路由跳转，但是在router.beforeEach((to,from,next)=>{next()})是可以正常跳转的，但是只要next传递参数的时候就会出现如下的错误： router.beforeEach((to,from,next)=>{ next('/reg') }) RangeError: Maximum call stack size exceeded 大概查了一
浏览器点击后退beforeRouteLeave钩子函数触发后路由地址改变了但页面未跳转
05-05
在 Vue 中，beforeRouteLeave 钩子函数是在路由离开之前触发的，可以在这个钩子函数中进行一些操作，例如提示用户是否确认离开当前页面等。 如果在 beforeRouteLeave 钩子函数中进行路由跳转操作，需要使用 next 函数来指定跳转的目标路由，例如： ```javascript beforeRouteLeave(to, from, next) { // 进行一些操作 // ... // 跳转到目标路由 next('/target-route') } ``` 如果你在 beforeRouteLeave 钩子函数中没有调用 next 函数或者调用了 next 函数但没有传入目标路由地址，那么路由不会进行跳转，页面也不会更新。 因此，你在浏览器点击后退时触发了 beforeRouteLeave 钩子函数，但如果没有调用 next 函数或者调用了 next 函数但没有传入目标路由地址，那么就会出现路由地址改变但页面未跳转的情况。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值