Vue路由NavigationDuplicated错误

这个错误信息显示的是 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），这与当前页面相同。

解决办法

1. 检查触发导航的条件：你需要检查为什么你的应用尝试执行这样的导航。可能是因为有某些代码（例如在组件的 created、mounted 钩子或响应式的计算属性中）错误地触发了多次导航到相同路由的行为。

2. 使用 push 或 replace 前进行检验：在调用 router.push 或 router.replace 之前，你可以添加一个检查，确认即将导航的目标路由是否与当前路由相同。如果相同，则不进行导航。

   if (this.$route.path !== newPath || this.$route.fullPath !== newFullPath) {
       this.$router.push(newPath);
   }
   

3. 捕捉并忽略这个错误：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");
           }
         });
     },
   

4. 升级 Vue Router 的使用方式：如果你确认需要重复导航到同一个路由（例如刷新视图），可以考虑使用 router.go(0) 来强制刷新当前页面，或者根据业务逻辑使用其他方式重置或更新页面内容。