vue3 element-plus 将路由和激活菜单绑定

<template>
  <div class="sideBarPadding">
    <div>
      <SFMenu :default-active="activeMenu">
        <SFMenuItem
          v-for="item in personalDetailMenuList"
          :key="item.path"
          :index="item.path"
          @click="handleClickMenu(item.path)"
        >
          <ScIcon :name="item.meta.icon" class="icon-menu icon-menu-other" />
          <span>{
   {
    item.meta.title }}</span>
        </SFMenuItem>
      </SFMenu>
    </div>
  </div>
</template>
<script setup lang="ts">
import {
    onMounted, ref } from 'vue';
import {
    useRouter, useRoute } from 'vue-router';
const router = useRouter();
const activeMenu = ref<string>(''); //当前激活的菜单按钮
const personalDetailMenuList: any = [ //路由信息
  {
   
    path: '/login/personalInformation',
    name: 'personalData',
    component: () => import('@/views/PersonalInformation/components/personalInformation.vue'),
    // redirect: 'noRedirect',
    meta: {
   
      title: '个人资料',
      icon: 'icon-renyuanguanli',
    },
  },
  {
   
    path: '/login/accountSettings',
    name: 'accountSet',
    component: () => import('@/views/PersonalInformation/components/accountSettings.vue'),
    // redirect: 'noRedirect',
    meta: {
   
      title: '账号设置',
      icon: 'icon-shezhi',
    },
  },
];
// 点击菜单调整到相应页面
const handleClickMenu = (path: string) => {
   
  router.push(path);
};

// 挂载
onMounted(() => {
   
  const {
    path } = useRoute(); // 获取当前路径
  activeMenu.value = path; // 将当前路径和激活菜单绑定
});
</script>