生成menu菜单

一、menu菜单分为三层结构

1.最外层el-menu标签

向第二层传递菜单结构数据

    <el-scrollbar>
      <el-menu :unique-opened="true" router>
        <SidebarItem
          :route="route"
          v-for="route in menuData"
          :key="route.path"
        ></SidebarItem>
      </el-menu>
    </el-scrollbar>

2.第二层el-menu-item

（1）判断是否包含子菜单

（2）有子菜单，调用自身进行循环递归渲染

  <el-menu-item :index="route.path" v-if="route.children.length === 0">
    <MenuItem :title="route.meta.title" :icon="route.meta.icon"></MenuItem>
  </el-menu-item>
  <el-submenu v-else :index="route.path">
    <template #title>
      <MenuItem :title="route.meta.title" :icon="route.meta.icon"></MenuItem>
    </template>
    <sideBarItem
      :route="child"
      v-for="child in route.children"
      :key="child.path"
    ></sideBarItem>
  </el-submenu>

3.最里层展示文字与图标

  <!-- element-plus图标 -->
  <i :class="icon" v-if="icon.includes('el-icon')" class="sub-el-icon"></i>
  <!-- 非element-plus图标 -->
  <svg-icon v-else :icon="icon"></svg-icon>
  <span>{{ title }}</span>

二、菜单收尾

1.动态css

创建一个store的getter，从getter获取动态css值，在template中使用store可以直接引用$store

2.路由跳转

给el-menu标签添加一个router属性

3.默认激活项

从vue-router中导入useRoute,获取path属性，赋值给el-menu的default-active属性

 <el-menu
        :unique-opened="true"
        :background-color="cssVariables.menuBg"
        :text-color="cssVariables.menuText"
        :active-text-color="cssVariables.menuActiveText"
        router
        :default-active="defualtMenu"
      >
        <SidebarItem
          :route="route"
          v-for="route in menuData"
          :key="route.path"
        ></SidebarItem>
 </el-menu>
import { useRouter, useRoute } from 'vue-router'
const route = useRoute()
const defualtMenu = computed(() => {
  const { path } = route
  return path
})