fix: 修复路由跳转,标签页同时高亮的问题

[Styunlen]

问题描述

菜单内的页面使用不同的query或params打开时，标签页会同时高亮
曾经好像有个PR提过，但是修复的不彻底 #465

问题复现

复现流程很简单，修改mock数据里asyncRoutes中tabs传参的showLink为true，然后进tabs页面同时打开两个以上页面

不同query，相同path的标签同时高亮

不同params，相同path的标签却都没有高亮

问题本质及修复

Bug似乎是在https:/pure-admin/vue-pure-admin/commit/facb09d7794129a62c60d5a5a16354c5ffc8f01f这个commit提交中引入的，这个commit虽然修复了相同页面内跳转标签高亮的问题,却也引入了以上两个问题.

这个commit想修复问题的本质是在route跳转过程中,emitter只传递了path信息,而没有传递query和params信息,导致添加到MultiTags Store中的route只有path信息而没有params信息,所以本应该高亮的标签才会被conditionHandler判定为inActive.
所以只要稍稍修改emmiter传值就可从本质上解决这个问题.

其次是对handler的判定方法做出修改,只判断path肯定是不够的,会像上面的commit一样引入同时高亮的bug.
还应该判断query和params, 即 path, query, params三者,任一一个属性不同,就代表着页面不同.

这里在实现中存在过一些问题,route中存储着的是页面的完整路径,而multiTags存储的是格式化路径,我在修改的文件中添加了注释,彻底解决的办法是像vue-router那样使用path-to-regexp来判断,当然如果添加一个新依赖略显麻烦的话,可以将判定逻辑修改为先判定query是否一样,然后判定params,若params存在则只比对params,否则比对path,最后返回结果,debug测试也能实现效果,但是否会出现其他bug就不太清楚了.

测试站点

https://styunlen.cn/pure/

[Styunlen]

测试站点是修复后的测试站点

[xiaoxian521]

如果你要showLink: true模式下传参 就要设置 title
title必须确定 也就是菜单名称根标签页保存一致 非动态

[Styunlen]

如果你要showLink: true模式下传参 就要设置 title title必须确定 也就是菜单名称根标签页保存一致 非动态

实测设置title并使用multiTags Store添加新标签也会有这个问题，我是在项目中遇到这个问题的，pr给的复现例程其实是我懒得写demo😂

你可以试试，左侧菜单内的任意同一个页面，用不同query打开，就会稳定复现同时高亮这个问题。

[Styunlen]

如果你要showLink: true模式下传参 就要设置 title title必须确定 也就是菜单名称根标签页保存一致 非动态

不过我的跳转是变更了title的，就是假设页面菜单title为部门管理,跳转页面为 1部门管理 2部门管理时，会触发这个问题。可能我的实现逻辑和你有区别吧，但是实际开发可能确实有这样的需求