vue-router.esm.js:2046 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to c
报错解释:
这个错误是由 Vue.js 的路由管理器 vue-router 抛出的。错误类型是 NavigationDuplicated
,意味着在处理一个导航到一个给定的路由时,发生了一个新的导航尝试去到同一个路由。这通常发生在用户快速连续点击同一链接或者在短时间内进行多次路由跳转时。
解决方法:
- 在你的 Vue 应用中,你可以监听路由对象的
beforeEach
钩子,并在这里处理这个错误。 - 检查正在发生的导航即将进行到的路由路径,如果发现是相同的路径,并且已经有一个导航在进行中,你可以使用
router.onError
方法来防止这个错误。
示例代码:
router.onError((err) => {
if (err.name === 'NavigationDuplicated') {
// 清除错误,不做进一步处理
console.log('Navigation duplicated, ignoring error');
} else {
// 处理其它错误
console.error(err);
}
});
或者,如果你想要完全避免这个错误,可以在 beforeEach
钩子中进行检查:
router.beforeEach((to, from, next) => {
if (router.currentRoute.path === to.path) {
// 当前路由就是即将跳转的路由,避免错误
console.log('Avoiding navigation duplication');
next(false); // 停止当前的导航
} else {
next(); // 允许导航继续
}
});
选择哪种方法取决于你的应用逻辑和用户体验的需求。通常,第二种方法在用户体验上更好,因为它不会让用户看到错误消息,而第一种方法更为简单。
评论已关闭