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

最新推荐文章于 2024-09-03 09:50:51 发布

不爱吃饭爱吃菜

最新推荐文章于 2024-09-03 09:50:51 发布

阅读量1.2k

点赞数 5

文章标签： vue.js javascript 前端 elementui

本文链接：https://blog.csdn.net/weixin_45288172/article/details/134856111

版权

<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>