关于vue-router的beforeEach无限循环的问题解决
更新时间：2017年09月09日 15:34:05 作者：安木贝神
本篇文章主要介绍了关于vue-router的beforeEach无限循环的问题解决，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
最近在使用vue-router的beforeEach钩子时候遇到了一个问题，就是在beforeEach()中设置好判断条件后出现了无限循环的问题
代码如下：
router.beforeEach((to, from, next) => {
if(isLogin){
next()
}else{
console.log('测试')
next('login')
}
})
结果chrome的debug中看到：
这个问题我是这样理解的：
router.beforeEach((to, from, next) => {
if(true){
next()
}else{
next('login')
}
})
- next() 表示路由成功，直接进入to路由，不会再次调用router.beforeEach()
- next('login') 表示路由拦截成功，重定向至login，会再次调用router.beforeEach()
也就是说beforeEach()必须调用next(),否则就会出现无限循环，next() 和 next('xxx') 是不一样的，区别就是前者不会再次调用router.beforeEach()，后者会！！！
官网这样写的（主要是红线标记的那句！）：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
解决打包后出现错误y.a.addRoute is not a function的
这篇文章主要介绍了解决打包后出现y.a.addRoute is not a function的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了Vue中$bus的用法及$on、$off的使用说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
工作中遇到需要根据单元格某个属性合并,特此记录下,下面这篇文章主要给大家介绍了关于vue element ui表格相同数据合并单元格效果的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-11-11
这篇文章主要给大家介绍了关于vue中路由传参以及跨组件传参的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要介绍了vue中router-view组件的使用,这个时候我们就需要用到路由中的 router-view组件（也叫路由占位符）了，本文通过示例代码给大家介绍的非常详细，需要的朋友可以参考下2021-10-10
本篇文章主要介绍了用Vue.extend构建消息提示组件的方法实例，具有一定的参考价值，有兴趣的可以了解一下2017-08-08
这篇文章主要介绍了Vue.js实现的购物车功能,结合实例形式分析了vue.js购物车的原理、数值计算及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下2019-01-01
Pinia是Vue的存储库,它允许您跨组件/页面共享状态,下面这篇文章主要给大家介绍了Pinia中action使用方法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-04-04
本篇文章主要介绍了Vue学习笔记进阶篇之过渡状态详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
动态组件指的是动态切换组件的显示与隐藏,下面这篇文章主要给大家介绍了关于Vue动态组件和keep-alive组件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
最新评论