vue3+vue-router@4 Error: Invalid navigation guard 或者 The “next“ callback was never called inside of

snows_l's BLOGhttp://snows-l.site

一、报错样例

        如下：

二、问题出处

        原因是以为路由前置守卫使用了async await导致的，代码如下：

三、解决办法

         将async await 改成 .then的方式就不会报错咯

// 路由后置守卫
router.beforeEach((to, from, next) => {
  console.log('=========== to ===========', to.path);
  NProgress.start();
  if (getToken()) {
    const store = useAppStore();
    if (!store.isLoadingRouter) {
      store.getUserMenu().then(res => {
        const menus = generateRoutes(res);
        // 没有pc菜单权限
        if (menus[0].children.length) {
          menus.forEach((item, index) => {
            item.children &&
              item.children.forEach(subItem => {
                router.addRoute(index == 0 ? 'RouterView' : 'mRouterView', subItem);
              });
          });
          if (!router.hasRoute('NotFound')) {
            router.addRoute({
              name: 'NotFound',
              path: '/:pathMatch(.*)*',
              redirect: '/404'
            });
          }
          // console.log('=========== router.getRouters ===========', router.getRoutes());
          // 添加了路由
          routeNext(to, next, store, true);
        } else {
          router.push({ path: '/403' });
          store.isLoadingRouter = true;
        }
      });
    } else {
      routeNext(to, next, store);
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) {
      // 在免登录白名单，直接进入
      next();
    } else {
      if (isMobile()) {
        if (to.path === '/' || to.path === '/m') {
          next({ path: '/m/index' });
        } else {
          next(`/login?redirect=${to.fullPath}`); // 否则全部重定向到登录页
        }
      } else {
        next(`/login?redirect=${to.fullPath}`); // 否则全部重定向到登录页
      }
    }
  }
});

去掉之后刷新就不会报错咯