Vue中使用el-menu高亮显示问题

https://blog.csdn.net/weixin_43336525/article/details/132541500

<template>
  <el-menu
    :default-active="activeRouter"
    router
    :uniqueOpened="true"
    :collapse="isCollapse"
    background-color="#fff"
    text-color="#333"
    active-text-color="#FF8244"
  >
    <sidebar-item
      v-for="item in routes"
      :key="item.path"
      :route="item"
    ></sidebar-item>
  </el-menu>
</template>

<script setup>
import SidebarItem from './SidebarItem'
import { ref, computed, watch } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { filterRouters, generateMenus } from '@/utils/route'
const activeRouter = ref('')
const store = useStore()
const router = useRouter()

const routes = computed(() => {
  const filterRoutes = filterRouters(router.getRoutes())
  return generateMenus(filterRoutes)
})

const isCollapse = computed(() => !store.getters.sidebarOpened)
watch(
  () => router.currentRoute.value.path,
  (newValue) => {
    activeRouter.value = newValue
  },
  { immediate: true }
)
</script>