Closed yujiaaoyujia closed 2 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,感谢。
Tabbar Props 提供 'active-route': { type: Array, default: () => ([]), // ['/route/routeA', '/route/routeB'] },
已在 2.12.34 版本支持匹配子路由
子路由的具体匹配方法文档呢?
这个功能解决了什么问题
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'] },