vue3+element-plus动态路由菜单

1、展示效果图

2、创建组件 SideMenu.vue

<!-- 侧边栏组件 -->
<template>
  <div>
    <el-menu :default-active="activeIndex" background-color="#001529" text-color="#ffffff">
      <template v-for="(item, index) in menuList" :key="item.path">
        <!-- 没有子路由 -->
        <template v-if="!item.children">
          <el-menu-item :index="item.path" v-if="!item.mate.hidden" @click="goPage">
            <template #title>
              <i class="iconfont" :class="item.mate.icon"></i>
              <label>{{ item.mate.title }}</label>
            </template>
          </el-menu-item>
        </template>
        <!-- 只有一个子路由 -->
        <template v-if="item.children && item.children.length == 1">
          <el-menu-item v-if="!item.children[0].mate.hidden" :index="item.children[0].path" @click="goPage">
            <template #title>
              <i class="iconfont" :class="item.children[0].mate.icon"></i>
              <label>{{ item.children[0].mate.title }}</label>
            </template>
          </el-menu-item>
        </template>
        <!-- 有两个及以上子路由 -->
        <el-sub-menu v-if="item.children && item.children.length > 1" :index="item.path">
          <template #title>
            <i class="iconfont" :class="item.mate.icon"></i>
            <label>{{ item.mate.title }}</label>
          </template>
          <!-- 递归组件 -->
          <side-menu :menuList="item.children"></side-menu>
        </el-sub-menu>
      </template>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';

defineProps(['menuList']);
const activeIndex = ref('1');
const $router = useRouter();
// 路由跳转
const goPage = (vc) => {
  $router.push(vc.index);
};
</script>

<script lang="ts">
// 当前组件的名称 用于递归组件使用
export default {
  name: 'SideMenu',
};
</script>

<style scoped lang="scss">
.el-menu {
  border-right: none;
  .iconfont {
    padding-right: 6px;
  }
}
</style>

3、路由示例
icon使用的是阿里巴巴图标库，需要下载在index.html全局引入
路由先存到store里面

创建routes.ts

export const constantRoute = [
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/login/login.vue'),
    mate: {
      title: '登录', //菜单标题
      hidden: true, //是否隐藏：true隐藏，false不隐藏，默认hidden隐藏
    },
  },
  {
    path: '/',
    name: 'layout',
    redirect: '/home',
    component: () => import('@/layout/index.vue'),
    mate: {
      title: 'layout', //菜单标题
      hidden: true, //是否隐藏：true隐藏，false不隐藏
      icon: '', //iconfont 名称
    },
    children: [
      {
        path: '/home',
        name: 'home',
        component: () => import('@/views/home/home.vue'),
        mate: {
          title: '首页', //菜单标题
          icon: 'icon-shouye1', //iconfont 名称
        },
      },
    ],
  },
  {
    path: '/screen',
    name: 'screen',
    component: () => import('@/views/screen/index.vue'),
    mate: {
      title: '数据大屏', //菜单标题
      icon: 'icon-zonghefenxipingtai',
    },
  },
  {
    path: '/404',
    name: '404',
    component: () => import('@/views/404/index.vue'),
    mate: {
      title: '404', //菜单标题
      hidden: true, //是否隐藏：true隐藏，false不隐藏
    },
  },
];

4、在页面中使用

<el-scrollbar class="scroll-bar"> 
    <side-menu :menuList="userStore.menuRoutes"></side-menu>
</el-scrollbar>
<script setup lang="ts">
import useUserStore from '@/store/modules/user';
let userStore = useUserStore();
</script>