youzan / vant

A lightweight, customizable Vue UI library for mobile web apps.
https://vant.pro/vant/
MIT License
23.33k stars 9.49k forks source link

[Feature Request] Tabbar 路由模式激活状态支持路径匹配 #9173

Closed yujiaaoyujia closed 2 years ago

yujiaaoyujia commented 3 years ago

这个功能解决了什么问题

Tabbar组件在路由模式下,匹配的路径如果存在嵌套路由,没有办法根据具体的嵌套路由进行高亮显示,slot-scope的active属性值在其嵌套路由下的值为false。

描述您想要的解决方案

TabbarItem组件,提供一个prop,可以由开发者动态匹配一个字符串数组,内容为嵌套路由的路径path。当当前路由path的值匹配到这个数组时,TabbarItem添加van-tabbar-item--active这个类使其高亮,并且slot-scope的active值返回true。 如果可以的话,希望提供的解决方案能同时兼容vant 2.0和3.0,感谢。

建议的API是什么样的

Tabbar Props 提供 'active-route': { type: Array, default: () => ([]), // ['/route/routeA', '/route/routeB'] },

chenjiahan commented 2 years ago

已在 2.12.34 版本支持匹配子路由

Jacob-D commented 1 year ago

子路由的具体匹配方法文档呢?