点击标签调整页面触发两次组件的onBeforeRouteLeave

[wanghaochun]

描述问题 (Describe the problem)

基于4.5.0精简版，在单组件内使用路由onBeforeRouteLeave，在点击其它标签触发跳转时，会触发两次onBeforeRouteLeave。通过左侧菜单点击不会出现该问题。

如何复现该问题 (How to reproduce the problem)

任意单组件内使用onBeforeRouteLeave，在页面上点击其它标签切换会触发两次该守卫。

操作系统和浏览器信息 (Operating system and browser information)

No response

验证 (Verify)

• 是否仔细阅读过 文档 (Have you read documentation carefully)
• 检查是否存在相同或类似的问题 issues (Check for the same or similar issues)

[xiaoxian521]

same #972

[wanghaochun]

same #972

你好，是点击标签栏切换是才会触发两次，点菜单栏不会。

[xiaoxian521]

我之前提交commit有备注记录 但是我没时间去找哈
目前太忙了 计划一堆
而且这个并不影响什么
而且这应该是vue-router的问题 根据我的记忆

[wanghaochun]

已找到问题所在：
1、先说说背景，我是想在用户离开页面前提醒用户当前数据没保存，让用户做二次确认，用了vueRoute官方的API在组件内声明onBeforeRouteLeave；

2、点击菜单栏时（如下）

弹窗（如下）只会弹一次，无论我点击确定或取消

3、点击标签栏（如下）

第一次弹窗选取消后会重复再弹一次
4、最后发现问题在于标签栏点击事件冒泡引起了路由两次跳转

临时解决方案：把tagOnClick事件取消后问题不再出现，标签栏切换和菜单跳转均正常
暂时未知该方式会造成什么影响。请看一下。

[wanghaochun]

好像将router-link标签的to属性置空更好，这样标签切换的可点击区域会更大。。当然会有什么影响暂时还未知。