Vue3 根据路由动态生成Menu左侧菜单栏

<template>
  <el-menu :default-active="onRoutes" router>
    <template v-for="route in routes">
      <el-submenu v-if="route.children && route.children.length > 0" :index="route.path" :key="route.path">
        <template #title>
          <i :class="route.meta.icon"></i>
          <span>{{ route.meta.title }}</span>
        </template>
        <menu-item v-for="child in route.children" :key="child.path" :item="child" />
      </el-submenu>
      <el-menu-item v-else :index="route.path" :key="route.path">
        <i :class="route.meta.icon"></i>
        <template #title>{{ route.meta.title }}</template>
      </el-menu-item>
    </template>
  </el-menu>
</template>
 
<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import MenuItem from './MenuItem';
 
const route = useRoute();
 
// 计算当前激活的路由
const onRoutes = computed(() => {
  return route.path;
});
 
// 假设有一个路由结构如下
const routes = [
  {
    path: '/menu1',
    meta: { title: 'Menu 1', icon: 'menu1-icon-class' },
    children: [
      { path: 'submenu1', meta: { title: 'Submenu 1' } },
      { path: 'submenu2', meta: { title: 'Submenu 2' } }
    ]
  },
  // ...其他路由
];
</script>
 
<style scoped>
/* 样式内容 */
</style>

这个代码实例展示了如何在Vue 3中使用<script setup>语法糖来创建一个动态生成左侧菜单栏的组件。它使用了el-menu和el-submenu组件来构建多级下拉菜单，并通过v-for来遍历一个预定义的路由结构数组routes。每个菜单项都绑定了相应的路由路径，并通过计算属性onRoutes来设置当前激活的菜单项。这个例子简洁明了，并且使用了vue-router的useRoute函数来获取当前的路由状态。