vant tabbar解决根据路径显示高亮问题

💂 个人网站:【紫陌】【笔记分享网】
💅 想寻找共同学习交流、共同成长的伙伴，请点击【前端学习交流群】

前言：今天在做项目的时候引入了vant中的tabbar组件，遇到到url路径匹配tabbar高亮问题。

首先演示问题：

解决方案

vant文档也没有给我解决这个问题的api，只能自己手动解决了。

这种tabbar功能一般都是用一个变量去控制高亮的。当然vant给我提供了v-model选中标签返回索引

1. 理解我的代码

我这里用的是 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   
})

这个解决方案并不是合格每个人的，要根据自己的业务灵活应用吧，我这里给大家提供一种思维方式。