携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情

多级菜单

引言

通过之前一段时间 Express 和 Mysql 的学习

这里尝试来搭建一个 后台系统 来巩固下学习的技术。

多级菜单

在上一节，我们将 菜单 实现完毕

但是会暴露出来一个问题就是 菜单的层级关系 ，最多 两 层。

虽然说在一个实际的项目中，两层菜单 已经够用了。但是 多级菜单 这个知识点，不能说用的少，就不知道，不能存在任何侥幸心理。

这里先将最终的效果图展示出来

路由 与 菜单

菜单的实现，其实是离不开我们的 路由，它俩是强绑定关系。

路由 routes 里面的所有值 均需要 对应的展示到菜单上，

但是是否显示，那就需要来控制 meta 下的 hidden 属性

两级菜单

两层菜单很好理解，

一级菜单的组件 主要来绑定 Layout 页面，地址为 src\layout\index.vue，来将我们的页面结构搭建起来。

而 二级菜单的组件，需要在 父级菜单 中添加 children 属性。

而且 父级组件 必须要需要存在 router-view ，子组件 来将自己的内容对应到 主体位置

多级菜单

通过上面 二级菜单 的展示，可以很清楚的了解到，如果我们想要 三级菜单

那么就需要在 二级菜单 中，再存在一个 router-view

但是问题来了，我们是如何知道 二级菜单 这个组件 里面的内容呢。

解决

虽然我们不知道 二级菜单 这个组件 里面的具体内容

但是我们知道了，需要在 二级菜单 里面添加 router-view

那么我们可以创建一个 专门用作 router-view 的一个组件。

在 src\components 创建 commerViews.vue 组件

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped></style>

在 router/index.ts 中引入

import CommerViews from '@/components/CommerViews.vue'

这样我们定义 多级菜单 的路由

  {
    path: '/duoji',
    name: '/duoji',
    component: Layout,
    meta: {
      title: '多级菜单'
    },
    children: [
      {
        path: '/duoji-1-1',
        name: '/duoji-1-1',
        component: () => import(/* webpackChunkName: "permissions-button" */ '@/views/duoji/duoji-1.vue'),
        meta: {
          title: '多级菜单1'
        }
      },
      {
        path: '/duoji-1-2',
        name: '/duoji-1-2',
        component: CommerViews,
        meta: {
          title: '多级菜单2'
        },
        children: [
          {
            path: '/duoji-2-1',
            name: '/duoji-2-1',
            component: () => import(/* webpackChunkName: "permissions-button1" */ '@/views/duoji/duoji-2.vue'),
            meta: {
              title: '多级菜单2-1'
            }
          },
          {
            path: '/duoji-2-2',
            name: '/duoji-2-2',
            component: () => import(/* webpackChunkName: "permissions-button2" */ '@/views/duoji/duoji-2-2.vue'),
            meta: {
              title: '多级菜单2-2'
            }
          }
        ]
      }
    ]
  },

至此，我们的 多级菜单 成功展示

总结

通过 Express-Mysql-Vue3-TS-Pinia 做出一个 后台系统 项目

实现了 多级菜单的一个展示 🌳