Vant中Sidebar 侧边导航的菜单与路由不一致

 

通过watch监听当前导航项的索引，再通过路由去改变

<script setup>
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const menuData = ref([
  { name: 'tag', to: '/tag' },
  { name: 'button', to: '/button' },
  { name: 'notify', to: '/notify' },
  { name: 'rate', to: '/rate' },
  { name: 'switch', to: '/switch' },
  { name: 'sidenav', to: '/sidenavigation' },
  { name: 'progress', to: '/progress' },
  { name: 'tab', to: '/tabs' },
  { name: 'backtop', to: '/backtop' },
])
const active = ref(0)
active.value = localStorage.getItem('sideActive') ? localStorage.getItem('sideActive') :0
const onChange =(i)=>{
 localStorage.setItem('sideActive',i)
 active.value = i
}
const route = useRoute()
watch(()=>route.path,(newVal)=>{
  menuData.value.find((item,i) =>{
    if(newVal == item.to ) {
      active.value = i
    }
  })
},{ immediate :true})
</script>