【Vue3+Pinia+Element Plus】el-menu :default-active 当前菜单项保持激活

在进行刷新页面或router.push()等操作后，el-menu 菜单项的active状态会丢失，使用以下代码可解决此问题。

新建一个 stores/useElMenuActiveStore.ts Pinia 模块

import { ref } from 'vue'
import { defineStore } from 'pinia'

export const useElMenuActiveStore = defineStore('elMenuActive', () => {
  const elMenuActive = ref('')
  
  return { elMenuActive }
})

router/index.ts 的路由守卫

import { useElMenuActiveStore } from '@/stores/elMenuActiveStore'

// ...

router.beforeEach((to, from, next) => {
  // ...

  // el-menu 高亮
  useElMenuActiveStore().elMenuActive = to.path

  // ...
    
  next()
})

MenuItem.vue 菜单项子组件

<template>
    <el-menu router :default-active="elMenuActive">
    </el-menu>
</template>

<script setup lang="ts">
import { computed } from '@vue/reactivity'
import { useElMenuActiveStore } from '@/stores/useElMenuActiveStore'

const elMenuActive = computed(() => {
    return useElMenuActiveStore().elMenuActive
})
</script>