今天在捣鼓项目的时候，发现一个挺烦人的问题，就是页面跳转的时候老是给我报“navigationcancelled”的错，导致页面有时候能跳过去，有时候又跳不过去，让人摸不着头脑。
遇到问题
我还以为是自己哪里代码写错，就去检查半天路由配置，看看是不是哪里路径写错，或者有什么语法问题。结果发现配置都好好的，没毛病。
然后我又去看看路由守卫，因为我项目里用这玩意儿来做一些权限控制啥的。我心想会不会是守卫逻辑写得有问题，把正常的导航给拦住？结果检查一遍，也没发现啥问题。
排查过程
这下我就有点懵，配置和守卫都没问题，那会是啥问题？
我想起来项目里有些组件是异步加载的，就是用到的时候才去加载，会不会是加载过程中出啥岔子？于是我又去看看网络请求，看看有没有加载失败的情况。结果发现，组件都加载成功，也没报错。
这下真是把我给难住，各种可能的问题都排查一遍，还是没找到原因。我甚至开始怀疑是不是路由器抽风，想重启一下试试。不过在这之前，我还是决定再挣扎一下。
我想，会不会是重定向的问题？因为我项目里确实用到路由重定向。于是我又去检查重定向的目标路由，确保它们都是存在的，而且配置也没问题。结果发现，重定向也没毛病。
找到原因
就在我快要放弃的时候，我突然想起来，我之前好像看到过有人说，在 Vue Router 里，如果连续跳转到同一个路由，可能会报这个“navigationcancelled”的错。我一想，我项目里还真有这种情况，有些按钮点击会触发跳转，如果用户手速快，连点几下，不就相当于连续跳转到同一个路由吗？
解决问题
找到原因就好办，我赶紧去网上搜一下，看看有没有啥解决办法。果然，搜到一堆解决方案，其中最简单的就是捕获这个错误。
原来，在 Vue Router 里，导航失败通常会返回一个 rejected 的 Promise，我们只要捕获这个 Promise，然后处理一下就行。具体怎么做？很简单，就是在你调用 或者 的地方，加一个 .catch 方法，像这样：
*('/some-path').catch(err => {
// 这里处理错误，比如打印个日志啥的
*(err);
这样一来，即使导航失败，也不会在控制台里报那个难看的红色的错误，而且我们还能在 catch 方法里做一些额外的处理，比如给用户一个友好的提示啥的。
当然除我说的这个方法，网上还有很多其他的方法，但是我觉得我这个方法最好理解，你们也可以自己去搜一搜。
搞定！现在页面跳转再也不会报那个烦人的“navigationcancelled”错误，用户体验也更好，完美！