vue3+vue-router@4 Error: Invalid navigation guard 或者 The “next“ callback was never called inside of
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
一、报错样例
如下:
二、问题出处
原因是以为路由前置守卫使用了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}`); // 否则全部重定向到登录页
}
}
}
});
去掉之后刷新就不会报错咯
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献16条内容
所有评论(0)