element-pluls中的動態el-menu中遇到的問題

山吹同学發表於2024-11-23

問題一：點選選單路由沒效果

el-menu中新增 router

<el-menu
    active-text-color="#f9cc4b"
    text-color="white"
    background-color="#63779c"
    class="el-menu-vertical-demo"
    router
    :collapse="isCollapse"
  >
    <el-menu-item
      v-for="item in commonRouter"
      :key="item.name"
      :index="item.path"
    >
      <component  class="icons" :is="item.meta.icon" />
      <template #title>{{ item.meta.title }}</template>
    </el-menu-item>
  </el-menu>

import { commonRouter } from "@/router/index.js";

export const commonRouter = [{
    path: "/home",
    name: "home",
    meta: {
        title: "首頁",
        icon: "ElementPlus"
    },
    component: () => import("@/views/index.vue")
}, {
    path: "/profile",
    name: "profile",
    meta: {
        title: "個人中心",
        icon: "UserFilled"
    },
    component: () => import("@/views/profile/index.vue")
}, {
    path: "/user",
    name: "user",
    meta: {
        title: "使用者管理",
        icon: "Avatar"
    },
    component: () => import("@/views/user/index.vue")
}]

問題二：選單根據當前路由保持高亮，重新整理丟失

在el-menu 中增加 :default-active="active"

import { useRouter } from "vue-router";
const router = useRouter();
const active=router.currentRoute.value.path;

下面是控制檯輸出router的結果

問題三：動態圖示
<component  class="icons" :is="item.meta.icon" />

相關文章