vue3中路由跳转对应菜单高亮，在＜script setup＞中监听路由变化

vue3中路由跳转对应菜单高亮

 <ul class="menu-list">
 	<li v-for="(item, index) in menuList" 
 		:key="item.id" :class="{ 'active': curIndex === index }"
         @click="handleClick(index, item.path)">
       {{ item.title }}
    </li>
</ul>

<script  setup>
import { ref, watchEffect } from "vue";
import { useRouter, useRoute } from 'vue-router'

const menuList = [
    { id: '1', title: '首页', path: '/ly/index' },
    { id: '2', title: '新闻', path: '/ly/news' },
    { id: '3', title: '提问', path: '/ly/question' },
]

const curIndex = ref(0)

const router = useRouter()

const handleClick = (index, path) => {
    curIndex.value = index
    router.push(path)
}

const route = useRoute()
watchEffect(() => {
    curIndex.value = menuList.findIndex(item => item.path == route.path)
})

</script>

下方是我微信公众号的二维码，关于react及其他相关知识点会在公众号上面更新，可以扫码关注以下，有什么问题也可以通过公众号跟我留言哦