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

layout布局

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

js 复制代码
<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格式)

路由

js 复制代码
{
  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',
          },
        },
      ],
    },
相关推荐
清风92002 分钟前
Logback——日志技术(基础)
java·前端·logback
EndingCoder2 分钟前
排序算法与前端交互优化
开发语言·前端·javascript·算法·排序算法·交互
晓13133 分钟前
JavaScript加强篇——第五章 DOM节点(加强)与BOM
java·开发语言·javascript
三月的一天27 分钟前
在 React Three Fiber 中实现 3D 模型点击扩散波效果
前端·react.js·前端框架
爱敲代码的小冰27 分钟前
npm 切换 node 版本 和npm的源
前端·npm·node.js
DoraBigHead32 分钟前
🧠【彻底读懂 reduce】acc 是谁?我是谁?我们要干嘛?
前端·javascript·面试
future141244 分钟前
项目开发日记
前端·学习·c#·游戏开发
汪子熙1 小时前
CSS 中 td:last-child a 选择器详解
前端·javascript
q567315231 小时前
Koa+Puppeteer爬虫教程页面设计
javascript·css·爬虫
北北~Simple1 小时前
第一次搭建数据库
服务器·前端·javascript·数据库