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

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

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

Vue3使用路由–南河小站

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的图标，可用 **直接绑定