vue3+element-plus 实现动态菜单和动态路由的渲染的项目实践

import { createApp } from 'vue';
import App from './App.vue';
import router from './router'; // 假设你有一个 router 文件

const app = createApp(App);

app.use(router).mount('#app');

import { createRouter, createWebHistory } from 'vue-router';
import Main from '../views/Main.vue';
import Home from '../views/Home.vue';
import Goods from '../views/goods.vue';
import Order from '../views/order.vue';

const routes = [
  {
    path: '/',
    name: 'main',
    component: Main,
    children: [
      {
        path: 'home',
        name: 'home',
        component: Home,
        meta: { title: '主页', icon: 'house' },
      },
      {
        path: 'goods',
        name: 'Goods',
        component: Goods,
        meta: { title: '商品列表', icon: 'el-icon-shopping-cart-full' },
      },
      {
        path: 'order',
        name: 'Order',
        redirect: 'order/table',
        children: [
          {
            path: 'table',
            name: 'Table',
            component: Order,
            meta: { title: '订单列表', icon: 'el-icon-s-fold' },
          },
        ],
        meta: { title: '订单', icon: 'el-icon-s-claim' },
      },
    ],
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

export default router;

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

<script>
export default {
  name: 'App',
};
</script>

<template>
    <el-aside :width="width">
        <el-menu
        background-color="#fff"
        active-text-color="#409eff"
        class="aside-menu"
        :collapse="isCollapse"
        :default-active="activeMenu"
        >
        <el-menu-item 
        v-for="item in noChilden"
        :index="item.path"
        :key="item.path"
        @click="handlemenu(item)"
        >
          <component class="icon" :is="item.meta.icon"></component>
           <span>{{ item.meta.title }}</span>        
        </el-menu-item>
        <el-sub-menu 
        v-for="item in hasChilden"
        :index="item.path"
        :key="item.path"
        >
          <template #title>
            <component class="icon" :is="item.meta.icon"></component>
            <span>{{ item.meta.title }}</span>
          </template>
          <!-- <el-menu-item-group> -->
            <el-menu-item 
            v-for="subItem in item.children"
           :key="subItem.path"
           :index="subItem.path"
           @click="handlemenuchild(item,subItem)"
           class="sub-menu-deep"
           
            >
              <component class="icon" :is="subItem.meta.icon"></component>
              <span>{{ subItem.meta.title }}</span>
            </el-menu-item>
          <!-- </el-menu-item-group> -->
        </el-sub-menu>
       
      </el-menu>
    </el-aside>
</template>

<script setup>

import {ref,computed,onMounted} from 'vue'
import {useAllDataStore} from "@/store"
import {useRouter,useRoute} from 'vue-router'

const list = ref([]);
const router = useRouter();
onMounted(() =>{
//找到根路由
const childRoutes = router.getRoutes().find(route => route.path === '/').children; 

list.value = childRoutes.filter(route => route.meta && route.meta.title);
console.log(list.value);
});
const hasChilden = computed(() => list.value.filter(item => item.children && item.children.length > 0))
const noChilden = computed(() => list.value.filter(item => !item.children || item.children.length === 0))

const route = useRoute()
const handlemenu = (item) =>{
  router.push(item.path)
 
}
const handlemenuchild = (item,subItem) =>{
  router.push(item.path+'/'+ subItem.path)
}
const activeMenu = computed(() => route.path)
</script>

<style lang="less" scoped>
.icon{
  width:18px;
  height: 18px;
  margin-right: 5px;
}
.el-menu {
  border-right: none;
  font-size: 20px;
  font-weight: bold;
  h3{
    line-height: 48px;
    text-align: center;
  }
}
.el-aside{
    height:100%;
    background-color: #fff;
    // box-shadow: 1px 0px 5px rgba(0, 0, 0, 0.2);
    border-right: 1px solid #e4e7ed;
}

</style>解释上面是怎么实现router 动态渲染菜单的

<script setup>
import CommonAside from '@/components/.vue'
import CommonHeader from '../components/MenuComponent.vue';
import CommonTab from '@/components/CommonTab.vue'
</script>

<template>
   <div class="common-layput">
    <el-container class="lay-container">
         <!-- 自定义左侧菜单组件 -->
         <menu-component />
    <el-container>
    <el-header class="el-header">
        <common-header />
    </el-header>
    <el-main class="right-mian">
          <!-- 路由显示内容 -->
      <router-view></router-view>
    </el-main>
    </el-container>
    </el-container>
   </div>
</template>

<style scoped lang="less">
   .common-layput,.lay-container{
      height:100%;
   }
   .el-header{
      background-color: #fff;
      box-shadow: 1px 0px 5px rgba(0, 0, 0, 0.2);
   }
</style>