全局前置守卫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修饰，函数调用使用awaitstore.dispatch，awaitstore.dispatch('getMenus', localId);