Vu3+Element-Plus根据路由配置生成菜单导航栏

2023-08-12 04:37 由宣君发表于 #前端开发

先看效果，整体界面结构如下

点击左侧菜单栏，右侧切换显示不同页面内容。

1 路由配置

路由配置如下：

const routes = [
  {
    path: "",
    component: () => import("@/layout/baseView.vue"),
    redirect: "/index",
    children: [
      {
        path: "/index",
        name: "首页",
        icon: "SwitchButton",
        hidden: false,
        component: () => import("@/page/dashboard/dashboard.vue"),
      },
      {
        path: "/content",
        name: "内容",
        icon: "Discount",
        hidden: false,
        component: () => import("@/layout/rightView.vue"),
        children: [
          {
            path: "manage-comment",
            icon: "MessageBox",
            name: "管理评论",
            hidden: false,
            component: () => import("@/page/content/manageComment.vue"),
          },
          {
            path: "manage-image",
            icon: "Odometer",
            name: "管理图片",
            hidden: false,
            component: () => import("@/page/content/manageImage.vue"),
          },
        ],
      },
      {
        path: "/user",
        icon: "UserFilled",
        name: "用户",
        hidden: false,
        component: () => import("@/layout/rightView.vue"),
        children: [
          {
            path: "list",
            icon: "User",
            name: "用户列表",
            hidden: false,
            component: () => import("@/page/user/list.vue"),
          },
          {
            path: "reset-pwd",
            icon: "Unlock",
            name: "重置密码",
            hidden: false,
            component: () => import("@/page/user/resetPwd.vue"),
          },
         // ....
        ],
      },
      {
        path: "/operation",
        icon: "Operation",
        name: "运维",
        hidden: false,
        component: () => import("@/layout/rightView.vue"),
        children: [
          {
            path: "mange-category",
            icon: "Edit",
            hidden: false,
            name: "管理分类",
            component: () => import("@/page/operation/manageCategory.vue"),
          },
          {
            path: "mange-carousel",
            icon: "Crop",
            name: "管理轮播图",
            hidden: false,
            component: () => import("@/page/operation/manageCarousel.vue"),
          },
        ],
      },
      
    ],
  },
  {
    path: "/login",
    hidden: true,
    component: () => import("@/page/login/login.vue"),
  },
];

说明：

@/layout/baseView.vue是整体页面结构

@/layout/rightView.vue是公共页面用于显示数据内容。

@/page/login/login.vue是登陆页面

2 页面结构

右侧数据内容视图是动态的，其它整个页面结构是固定的，因此提取baseView.vue作为页面基本结构。

登录界面是另一个页面整体，因此login.vue和基本结构页面baseView.vue都在App.vue页面中通过路由进行切换，因此App.vue中添加router-view进行动态路由渲染。

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

左侧菜单导航，菜单是根据路由进行动态渲染的，所以将路由生成菜单抽取为独立组组件leftMenuBar.vue。在mounted()中获取路由配置

export default {
  data() {
    return {
      menuList: [],
    };
  },
  mounted() {
    let routes = router.options.routes;
    this.menuList = routes[0].children;
    console.log(this.menuList);
  },
};

⚠️Vue3通过router.options.routes 获取配置的路由

在右侧数据视图页面rightView.vue添加router-view标签

<template>
  <div class="right-view">
    <div class="header"></div>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

3 结合Element-plus 生成菜单导航

导入Element-plus

遍历路由通过element-plus的Menu组件生成菜单导航，完整的代码如下：

<template>
  <div>
    <el-menu
      default-active="0"
      :unique-opened="true"
      class="el-menu-vertical-demo"
    >
      <template v-for="(item, index) in menuList" :key="index">
        <router-link :to="item.path" v-if="!item.children" :key="index">
          <el-menu-item :index="index + ''">
            <el-icon><component :is="item.icon"></component></el-icon>
            <span>{{ item.name }}</span>
          </el-menu-item>
        </router-link>

        <el-sub-menu :index="index + ''" v-else>
          <template #title>
            <el-icon><component :is="item.icon"></component></el-icon>
            <span>{{ item.name }}</span>
          </template>
          <router-link
            :to="item.path + '/' + sub.path"
            v-for="(sub, subIndex) in item.children"
            :key="subIndex"
          >
            <el-menu-item :index="index + '-' + subIndex">
              <el-icon><component :is="sub.icon"></component></el-icon>
              <span>{{ sub.name }}</span>
            </el-menu-item>
          </router-link>
        </el-sub-menu>
      </template>
    </el-menu>
  </div>
</template>

4 设置菜单图标

由于element-plus使用svg 图标，复制的代码是<el-icon><Search /></el-icon>这样的，因此在遍历路由时，就不能通过<i :calss = "xxxx"></i>设置了，要通过<el-icon><component :is="xxxx"></component></el-icon>来设置，:is绑定的是icon的名称

    <el-icon><component :is="item.icon"></component></el-icon>

⚠️这个地方element不同，element使用的是font-class的图标，可用直接绑定