七、动态菜单—递归组件的使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了七、动态菜单—递归组件的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

layout布局

七、动态菜单—递归组件的使用,vue3.0,框架搭建,vue.js,前端,javascript

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

七、动态菜单—递归组件的使用,vue3.0,框架搭建,vue.js,前端,javascript

七、动态菜单—递归组件的使用,vue3.0,框架搭建,vue.js,前端,javascript 文章来源地址https://www.toymoban.com/news/detail-827709.html

左侧菜单组件 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>

多级路由时使用递归组件：必须给组件命名
因为每一个项我们要判断俩次（是否要隐藏，以及子组件个数），所以在el-menu-item外面又套了一层模板
当子路由个数大于等于一个时，并且或许子路由还有后代路由时。这里我们使用了递归组件。递归组件需要命名（另外使用一个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',
          },
        },
      ],
    },