问题
今天有一个操作，当点一个按钮后，使用replace从http://localhost:8081/#/home跳转到http://localhost:8081/#/home，也就是相同的地址，这时候控制台会报错：
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/home".
但是，我已经在全局守卫加了如下判断，但是似乎并没有触发和打印to和from的值，为什么？
router.beforeEach((to, from, next) => {
console.log('to:', to.fullPath, 'from:', from.fullPath)
if (to.fullPath === from.fullPath) {
console.log('重复导航')
next(false)
} else if (to.path == '/login' || to.path == '/register') {
next()
} else if (to.matched.length === 0) {
next('/404')
} else {
next()
}
})
分析
在 Vue Router 中，当你使用 router.replace 或 router.push 导航到当前页面时，会触发 NavigationDuplicated 错误。
这个错误是 Vue Router 的内置机制，用来避免重复导航。即使在 beforeEach 导航守卫中进行路径检查，错误仍然会抛出，因为这个错误是在实际导航尝试发生之前抛出的。
NavigationDuplicated 错误不会阻止代码的执行，它只是在尝试进行重复导航时抛出一个警告。在许多情况下，你可以安全地忽略这个错误，但如果你希望捕获并处理它，可以采取下面方案。
解决方案
1、捕获导航错误
在调用 router.replace 或 router.push 时，使用 .catch 方法捕获并处理 NavigationDuplicated 错误。
// 在组件中调用导航方法
this.$router.replace('/home').catch(err => {
if (err.name === 'NavigationDuplicated') {
console.log('Avoided redundant navigation to current location:', err.message);
} else {
console.error(err);
}
});