💂 个人网站:【紫陌】【笔记分享网】
💅 想寻找共同学习交流、共同成长的伙伴,请点击【前端学习交流群】
前言:今天在做项目的时候引入了vant中的tabbar组件,遇到到url路径匹配tabbar高亮问题。
首先演示问题:
解决方案
vant文档也没有给我解决这个问题的api,只能自己手动解决了。
这种tabbar功能一般都是用一个变量去控制高亮的。当然vant给我提供了v-model选中标签返回索引
- 理解我的代码
我这里用的是 vue3+vant4,上面这个代码是没有解决问题的。
根据代码看出根据path匹配显示高亮tabbar的问题,问题就是路径变化currentIndex匹配不到对应的 index
解决办法:用watch监测路由的路径变化然后给currentIndex匹配正确index
tabbar数据信息是后端返回来的,格式如下(数组包裹对象)
上代码:
// 监听路由改变时, 找到对应的索引, 设置currentIndex
const currentIndex = ref(0);
const route = useRoute();
watch(route ,()=>{
const index = tabbarData.findIndex(item => item.path === route.path)
if(index === -1) return
currentIndex.value = index
})
这个解决方案并不是合格每个人的,要根据自己的业务灵活应用吧,我这里给大家提供一种思维方式。