这个错误信息显示的是 NavigationDuplicated
错误,也就是说,在 Vue.js 使用 vue-router 时,应用试图导航到一个与当前已经是激活状态的路由相同的新路由上,从而触发了这个错误。在实际应用中,这通常发生在你试图通过 vue-router
的 push
或者 replace
方法重复跳转到相同的路由地址上。
报错原因
具体来说,在你的这条错误信息中:
Avoided redundant navigation to current location: "/publicApiHub?cateName=%E5%85%A8%E9%83%A8%E5%88%86%E7%B1%BB"
这表明应用试图再次导航到同一个路径和查询参数(/publicApiHub?cateName=%E5%85%A8%E9%83%A8%E5%88%86%E7%B1%BB
),这与当前页面相同。
解决办法
-
检查触发导航的条件:你需要检查为什么你的应用尝试执行这样的导航。可能是因为有某些代码(例如在组件的
created
、mounted
钩子或响应式的计算属性中)错误地触发了多次导航到相同路由的行为。 -
使用
push
或replace
前进行检验:在调用router.push
或router.replace
之前,你可以添加一个检查,确认即将导航的目标路由是否与当前路由相同。如果相同,则不进行导航。if (this.$route.path !== newPath || this.$route.fullPath !== newFullPath) { this.$router.push(newPath); }
-
捕捉并忽略这个错误:Vue Router 在 3.1.0 之后的版本中,默认行为是当路由跳转到相同路径时会产生一个 Promise 错误。你可以通过捕捉并忽略这个错误来处理它:
this.$router.push(path).catch(err => { if (err.name !== 'NavigationDuplicated') { // 只处理 NavigationDuplicated 以外的错误 throw err; } });
//业务中示例 beforeCreate(){ this.$router.push({ path: "/publicApiHub", query: { cateName: "全部分类" }, }) .catch(err => { if (err.name === 'NavigationDuplicated') { console.log("NavigationDuplicated"); } }); },
-
升级 Vue Router 的使用方式:如果你确认需要重复导航到同一个路由(例如刷新视图),可以考虑使用
router.go(0)
来强制刷新当前页面,或者根据业务逻辑使用其他方式重置或更新页面内容。