在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
如果哪个小伙伴知道方案三的实现逻辑,可以私信我或者留言,万分感谢!
希望可以帮到大家解决这个问题!!!