Nuxt、Vue 切换导航高亮效果解决方案 演示代码使用的是Nuxt3代码，如果你的程序不是Nuxt或Vue也可以看看我写的思路，这个思路适用于大部分前端框架

解决方案代码

<script setup>
const props = defineProps({
  menus: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

// route
const route = useRoute()
watch(() => route.fullPath, () => {
  currentActive.value = route.fullPath
})

const currentActive = ref(route.fullPath)
</script>

<template>
  <div class="menu">
    <div class="p-6">
      <div v-for="item in menus" :key="item.id" class="mb-6" :class="{ 'text-blue-500': currentActive === item.uri }" @click="currentActive = item.uri">
        <NuxtLink :to="item.uri === '' ? '/' : item.uri">{{ item.label }}</NuxtLink>
      </div>
    </div>
  </div>
</template>

思路

这个代码思路其实很简单，定义一个currentActive用于存放当前高亮的导航，并设置为当前路由为默认值

const currentActive = ref(route.fullPath)

当我点击导航中的一个链接，就存储这个链接的uri，然后在导航循环代码中做判断 currentActive === item.uri 如果值true 通过class设置为高亮