vue路由报错Avoided redundant navigation

今天在写项目的时候，触发了一个bug，即是：Avoided redundant navigation重复路由；Navigation cancelled from “/…“ to “/…“ with a new navigation 路由跳转重复， 如图所示

1、路由重复bug出发原因

在当前页面上，点击了不同的按钮，push或者replace 了同一个路由对象，此时就会造成路由跳转重复

2、关于其他博主的方法讨论

我查阅了下，其他博主给的解决方法主要一下两种：

1. 降低vue-router版本，vue-router 2以及2以下版本不会触发这种报错信息
2. 在路由表route/index.js里或者push、replace方法上 捕获catch异常

总结： 屁用没有， 我觉得 问路由重复（Navigation cancelled from “/…“ to “/…“ with a new navigation）这种问题的，都是因为点击不同按钮 路由无法跳转， 而我们都是要修复这个bug的，而不是 捕获异常，消灭报错信息的

3、最终解决

3.1 情景一：

情景一：点击不同的二级菜单，跳转不同的路由，如下图所示

注意： 因为项目中，左菜单定制化较高，所以这个左菜单是我我自己封装的

报错原因： 点击二级菜单，事件会冒泡到父级，所以点击不同的二级菜单，其实都是跳转的是父级的路由信息

所以只需要阻止事件冒泡，就可以解决路由重名的bug

@click.stop="fn"

3.2 情景二

如果你们不是冒泡导致的，也可以将情景分享下，我们一起解决~