一、前言

接触和使用 vue3 快 1 年了, 时至今日, vue3 的生态已经趋于成熟, 已结陆陆续续有不少公司开始使用 vue3 开发项目, 学习和使用 vue3 已是大势所趋. vue3-ts-antd-admin是基于 vue3、ts、tsx、vite 开发的一套中后台管理系统模板, 简洁轻量, 适合中小型中后台项目的开发.

本系列会从零开始介绍该系统的构造过程. 本文是该系列的第三篇, 上一篇中, 主要介绍了动态路由树的设计与实现, 本篇将从导航菜单的设计与实现出发, 将动态路由树落地为实实在在的 Dom

Github: 传送门

演示地址：传送门

编辑器预览：

二、导航菜单

一般的后台管理系统, 除去 白名单 部分(如登录注册等不需要登录和角色权限的页面) 之外, 其它部分都大体为 导航菜单 + 内容区

如果用路由树的形式去表示:

[
  // 白名单-登录注册
  {
    name: "auth",
    redirect: "/auth/login", // 重定向到子路由login
    children: [
      {
        name: "login",
        path: "/auth/login",
        component: Login
      },
      {
        name: "register",
        path: "/auth/register",
        component: Register
      },
    ],
  },
  // 动态路由
  {
    name: "dynamicRouter",
    redirect: "user", // 重定向到所有角色都拥有的子路由上
    component: BasicLayout
    children: [
      // 用户中心
      {
        name: "user",
        redirect: "/user/center",
        children: [
          // 个人中心
          {
            name: "user-center",
            path: "/user/center",
            component: UserCenter
          },
          // 用户管理
          {
            name: "user-manager",
            path: "/user/manager",
            component: UserManager
          },
          // ...
        ],
      },
      // ...
    ],
  },
  // 白名单-404
  // 如果无法匹配到, 则跳转到404
  {
    name: "404",
    redirect: "/404",
    path: "/:catchAll(.*)",
  },
];

动态路由 部分, 全部都渲染在 BasicLayout 组件上

1. BasicLayout

BasicLayout 作为 一级路由页面, 包含了登录后的所有内容, 如:

• 公共头部

• 导航菜单

• 公共底部

• 各种悬浮的按钮和入口

• 内容区, 即二级和多级路由渲染区

...

<template>
  <div class="basic-layout">
    <!-- 公共头部 -->
    <CommonHeader />
    <!-- 公共组件 -->
    <CommonComponent />
    <!-- 内容区 -->
    <router-view />
    <!-- 公共底部 -->
    <CommonFooter />
  </div>
</template>

总结

本文是 从零打造基于 vue3+ts+tsx+vite 的 antdv 中后台管理系统 系列的第三篇, 主要介绍了动态路由的设计与实现

文中若有错误或者可优化之处, 望请不吝赐教. 如果对你有帮助的话, 麻烦点个赞