解决Vue-router跳转同地址报错的三种策略

在Vue.js项目中，当使用vue-router进行导航时，可能会遇到一个特定的报错，即"Navigation cancelled from "/" to "/" with a new navigation"。这种情况通常发生在试图通过编程方式向当前或相同路径进行跳转时，比如在用户未登录或token过期时需要重定向到登录页。以下是三种解决此问题的方法： 1. 降级vue-router版本: 如果你的项目依赖的是vue-router 3.0及以上版本，该错误可能是由于内部逻辑更改引起的。一种解决方案是将版本回退到较旧的2.8.0-S版本，可以使用`npm install vue-router@2.8.0-S`命令来安装。这样可以避免新的行为导致的错误。 2. 添加catch处理: 在调用`this.$router.push`或`this.$router.replace`时，主动捕获可能出现的异常。例如： ```javascript this.$router.push({ path: '/register' }).catch(err => { console.log(err); // 打印错误信息并处理 }); ``` 这样可以在出现错误时进行适当的错误处理，而不是让应用崩溃。 3. 修改路由实例的原型方法: 另一种长期的解决方案是在`VueRouter`的原型上覆盖`push`和`replace`方法，以便在尝试跳转到同一路径时自动捕获错误： ```javascript const originalPush = VueRouter.prototype.push; const originalReplace = VueRouter.prototype.replace; VueRouter.prototype.push = function push(location, onResolve, onReject) { if (onResolve || onReject) { return originalPush.call(this, location, onResolve, onReject); } return originalPush.call(this, location).catch(err => err); }; VueRouter.prototype.replace = function replace(location, onResolve, onReject) { if (onResolve || onReject) { return originalReplace.call(this, location, onResolve, onReject); } return originalReplace.call(this, location).catch(err => err); }; ``` 这种方法可以全局地处理这类错误，无需在每次调用时手动添加catch。 总结来说，处理vue-router在同一地址跳转时的报错，可以采取降级版本、添加错误捕获或者修改路由实例的方法。选择哪种方式取决于项目的具体情况和长期维护的需求。务必确保在代码中正确处理这些异常，以提供更好的用户体验。