七、动态菜单—递归组件的使用

服务器托管网

layout布局

左侧菜单menu页面刷新后默认高亮

左侧菜单组件 Menu

template>
  template v-for="(item, index) in menuList" :key="item.path">
    !-- 没有子路由 -->
    template v-if="!item.children">
      el-menu-item v-if="!item.meta.hidden" :index="item.path">
        template #title>
          span>{{ item.meta.title }}/span>
        /template>
      /el-menu-item>
    /template>
    !-- 有且只有一个子路由 -->
    template v-if="item.children && item.children.length == 1">
      el-menu-item index="item.children[0].path" v-if="!item.children[0].meta.hidden">
        template #title>
          span>{{ item.children[0].meta.title }}/span>
        /template>
      /el-menu-item>
    /template>
    !-- 有子路由且个数大于一个 -->
    el-sub-menu :index="item.path" v-if="item.children && item.children.length >= 2">
      template #title>
        span>{{ item.meta.title }}/span>
      /template>
      !-- 使用递归组件：必须给组件命名 -->
      Menu :menuList="item.children">/Menu>
    /el-sub-menu>
  /template>
/template>

script setup lang="ts">
//获取父组件传递过来的全部路由数组
defineProps(['menuList'])
/script>
script lang="ts">
export default {
  name: 'Menu',
}
/script>
style lang="scss" scoped>/style>

1. 多级路由时使用递归组件：必须给组件命名
2. 因为每一个项我们要判断俩次（是否要隐藏，以及子组件个数），所以在el-menu-item外面又套了一层模板
3. 当子路由个数大于等于一个时，并且或许子路由还有后代路由时。这里我们使用了递归组件。递归组件需要命名（另外使用一个script标签，vue2格式）

路由

{
  path: '/acl',
    component: () => import('@/layout/index.vue'),
    name: 'Acl',
    meta: {
    hidden: false,
      title: '权限管理',
      icon: 'Lock',
    },
服务器托管网    children: [
        {
          path: '/acl/user',
          component: () => import('@/views/acl/user/index.vue'),
          name: 'User',
          meta: {
            hidden: false,
            title: '用户管理',
            icon: 'User',
          },
        },
        {
          path: '/acl/role',
          component: () => import('@/views/acl/role/index.vue'),
          name: 'Role',
          meta: {
            hidden: false,
            title: '角色管理',
            icon: 'UserFilled',
          },
        },
        {
          path: '/acl/permission',
          component: () => import('@/views/acl/permission/index.vue'),
          name: 'Permission',
          meta: {
            hidden: false,
            title: '菜单管理',
            icon: 'Monitor',
          },
        },
      ],
    },

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: Blender教程（基础）-内插面、分离、环切、倒角-08

一、内插面 菜单位置如下图位置。 单击需要处理的面，出现一个黄色的圈。 1、菜单选中内插 鼠标悬停在黄色圈内单击左键可以来回实现内插，但是发现并不好操作。 2、快捷键内插 在选中需要操作的面之后，鼠标移动到外面，键盘在英文状态下按i键实现快捷键插入。快捷键更加…