在vue开发过程中，有这样一个需求，页面操作了很多信息，但是都是前端缓存，没有录入数据库，此时离开页面需要有一个警告提示
提示是否离开页面，离开后缓存将会被删除
这时候，我们第一个想到的就是beforeRouteLeave当前页面离开的时候页面给出警告是否离开，确认之后才会离开，否则不离开
在面包屑和左侧菜单栏都有操作
但是现象是：面包屑是可以正常提示警告框，但是左侧菜单栏是触发了2次，很奇怪
导致原因：
左侧菜单使用了el-menu的router 为true表示使用vue-router 的模式激活导航时以 index 作为 path 进行路由跳转，el-menu-item 又包了一层router-link会导致触发两次。
解决方案：
方案一：删除el-menu的router模式开启
方案二：删除el-menu里的router-link，因为开启了el-menu的router表示使用vue-router 的模式激活导航时以 index 作为 path 进行路由跳转，会自己进行跳转
方案三：圈内其他大神提供的方案，没理解怎么用的，贴上地址https://www.cnblogs.com/Amar/p/9154452.html
如果哪个小伙伴知道方案三的实现逻辑，可以私信我或者留言，万分感谢！
希望可以帮到大家解决这个问题！！！
网友评论