Tencent / tdesign-vue-next-starter

A starter-kit for TDesign Vue Next UI components
https://tdesign.tencent.com/starter/vue-next/
MIT License
701 stars 192 forks source link

[Menu] 路由菜单项高亮问题,同一一级路由下,如两个二级路由的path以相同字符起始,菜单项高亮会重复 #444

Closed ngyyuusora closed 1 year ago

ngyyuusora commented 1 year ago

tdesign-vue-next-starter 版本

0.7.2

重现链接

No response

重现步骤

image 使两个二级路由的path以相同字符起始,在此,路由1和路由2的path均以'advanced'起始。 image 菜单激活为路由1时无问题,切换到路由2就会出现路由1和路由2的菜单同时高亮。 image

期望结果

二级菜单项高亮不重复。

实际结果

image

框架版本

No response

浏览器版本

Chrome(110.0.5481.178)

系统版本

No response

Node版本

No response

补充说明

简单测试,如果是使用kebab-case,第一段重复也会导致这个问题(毕竟横杠也算是字符),大小写好像也会出现。两个二级菜单无论是否相邻也会出现。 image image 没有细看,可能是这里导致重复高亮(菜单项的value和当前路由匹配上了)。不影响实际路由切换功能,只是高亮显示问题。但在路由1激活时,他的value是正确的,激活path相同起始的路由2,结果路由1的value就变了

github-actions[bot] commented 1 year ago

👋 @ngyyuusora,感谢给 TDesign 提出了 issue。 请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。

github-actions[bot] commented 1 year ago

♥️ 有劳 @pengYYYYY 尽快确认问题。 确认有效后将下一步计划和可能需要的时间回复给 @ngyyuusora 。

ngyyuusora commented 1 year ago

经测应该是只有当路由1的path值完全被路由2包含时,在路由2被激活时,会出现这种问题。 advanced, advancedcard ,在advancedcard被激活时会出现 advancedd, advancedcard 不会出现

timi137137 commented 1 year ago

估计是路由相关匹配有这堆问题(扶额)

ngyyuusora commented 1 year ago

问题场景:path值,路由1为user,路由2为user-log 建议根据具体页面用途将路由1修改为比如user-list,使值不被路由2完全包含来暂时规避

dianjie commented 1 year ago

@timi137137 https://github.com/Tencent/tdesign-vue-next-starter/blob/0.7.2/src/layouts/components/MenuContent.vue#L88 这里的判断影响的