beforeEach钩子与无限循环问题

全局前置守卫beforeEach

beforeEach 守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中。

每个守卫方法接收三个参数：

to: Route: 即将要进入的目标路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。确保要调用 next 方法，否则钩子就不会被 resolved
```
router.beforeEach(async (to, from, next) => {const localId = localStorage.getItem('userId');if (to.name === 'login') { // 访问login,缓存判断if (localId) { //有缓存，访问主页next({ name: 'main' });} else {// 无缓存，跳转登录页next();}} else if (to.name !== 'login' && localId) { // 访问非登录页，有缓存，继续跳转该页面next();} else if (to.name !== 'login' && !localId) {next({ name: 'login' }); // 访问非登录页，无缓存，跳转login}
});
```
　　在这里需要注意的是，通过next({name:'xxx'})，就要通过to.name ==='login'去判断；如果是通过next({path:'xxx'})跳转，就要通过to.path==='/login'去判断，他们必须一一对应。这两种方式是改变路由的跳转路径，但是不管怎么样，最后一定要执行next()才可以被resolved。如果next()没有被执行，就会出现无限循环，最后浏览器就崩了！网上有很多文章写了关于beforeEach无限循环的问题，终其原因就是没有执行到next()。如果你的beforeEach出现了无限循环，耐心地在beforeEach函数中打上断点，检查自己的逻辑是不是没对。

另外需要说的一点是，在beforeEach里可能会有异步请求，如后台请求菜单，获取用户信息等等，需要在调用store的方法，调用时，beforeEach使用async修饰(如上文代码所示)，函数调用时加上await关键字使得同步执行，如 await store.dispatch('getMenus', localId);这里也算是一个坑，需要格外注意。

总结一下

beforeEach收尾中必须要执行next()才不会出现无限循环
路由跳转时，属性需要一致，to.name/to.path等
在beforeEach中共调用store的异步函数，beforeEach加上async修饰，函数调用使用await store.dispatch， await store.dispatch('getMenus', localId);

　如果文章对你有帮助，麻烦帮忙点个赞哦！嘿嘿！做一个靠谱的技术博主！

转载于:https://www.cnblogs.com/CatcherLJ/p/11205677.html

beforeEach钩子与无限循环问题相关推荐

vue-router使用next()跳转到指定路径时会无限循环
我在路由为 /path 的页面这样写 beforeRouteLeave (to, from, next) {console.log('离开路路由')if(to.fullPath==='/home'){ ...
vue 一直登录错误_vue中路由拦截无限循环的情况
如下图,浏览器报出这个错误这是因为路由守卫在拦截路由的时候,找不到跳转的地址,引起了无限循环. 在设置路由拦截的时候当指向另一个地址的时候还会触发一次路由拦截,既每次地址栏的变化都会触发一次路由拦截 ...
如何解决 React.useEffect() 的无限循环
作者:Shadeed 译者:前端小智来源:dmitripavlutin 点赞再看,微信搜索**[大迁世界],B站关注[前端小智]**这个没有大厂背景,但有着一股向上积极心态人.本文 GitHub h ...
【骚气的动效】无限循环往下往复淡入淡出运动，通常用于向下箭头，提示用户可以往下滚动或者点击展开
/* 无限循环往下往复淡入淡出运动 */%auto-down-animate {animation: auto-down-animate 1s ease-in-out infinite;-moz-an ...
php easyui tree 结构,EasyUI Tree树组件无限循环的解决方法
在学习jquery easyui的tree组件的时候,在url为链接地址的时,发现如果最后一个节点的state为closed时,未节点显示为文件夹,单击会重新加载动态(Url:链接地址)形成无限循环. ...
python无限循环条件循环_Python - 条件控制、循环语句 - 第十二天
Python 条件控制.循环语句 end 关键字关键字end可以用于将结果输出到同一行,或者在输出的末尾添加不同的字符,实例如下: Python 条件语句是通过一条或多条语句的执行结果(True 或 ...
linux系统一直循环登录界面,Ubuntu 14.04解决登录界面无限循环的方法
在Ubuntu下配置Android的环境时,想像在Windows中那样在终端中直接启动adb,以为Linux和Windows一样,将adb的路径添加到环境变量中,于是将adb的路径也export到/e ...
CSS动画效果无限循环放大缩小
效果图: CSS动画效果无限循环放大缩小 <image class="anima" mode="widthFix" @click="nav&qu ...
【Android】ViewPager实现无限循环滚动
最近做的一个项目,客户要求在ViewPager实现的主页面中滑动到最后一页后继续滑动能返回到第一页,也就是实现无限循环滚动,效果如下: 看了下ViewPager没有滑到尽头的回调方法,因此想到的解决方 ...

beforeEach钩子与无限循环问题

全局前置守卫beforeEach

beforeEach钩子与无限循环问题相关推荐

最新文章

热门文章