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

动态路由 - 分析🍈

引言

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

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

在之前的一些列文章下，终于将我们的 菜单 页面以及功能 已经处理完毕

接下来就是根据我们所添加配置的 菜单 生成 路由，也称 动态路由

分析

要实现一个 动态路由，切勿直接将原先的 静态路由 废弃。

要 理清思路，实现 动态路由 的几个前提是什么。

• 一个 简单的 静态路由

• 实现 侧边栏菜单

• 最后是得到 动态路由

静态路由-->侧边栏菜单

之前我们的配置，就是直接在路由文件的代码上，进行写死的状态，也称 静态路由

它与我们通过 菜单管理 所配置的 菜单，根本是 毫无关系

所以我们如果想要实现一个 动态路由，那么需要先将我们之前配置的 菜单 与 侧边栏菜单 对应起来。

• 先实现一个通过 菜单，也就是后端返回的所有的菜单列表，前端来进行一定的加工，得到一个树型的数据结构，在侧边栏中进行展示

• 点击后，路由地址会进行改变

• 但是由于没有相关路由，所以会得到一个空白页面。

侧边栏菜单-->动态路由

上面我们的到相关的 侧边栏菜单 后，就可以安心处理 动态路由

动态路由 其实最重要有两个知识点

• 如何动态 import 组件

• router.addRoute()

看着很简单，其实做起来会遇到很多意想不到的问题。

最后，这里先将 简单的 静态路由 的代码贴出来，满足我们的 登录 和 工作台 即可

export const constantRoutes: Array<RouteRecordRaw> = [
  {
    path: '/',
    redirect: '/workbench',
    meta: {
      hidden: true
    }
  },
  {
    path: '/workbench',
    name: 'Layout',
    component: Layout,
    meta: {
      title: '首页',
      icon: 'icon-G-stack-line',
      alone: true
    },
    children: [
      {
        path: '/workbench',
        name: 'workbench',
        component: () => import(/* webpackChunkName: "workbench" */ '@/views/workbench/index.vue'),
        meta: {
          title: '工作台'
          // icon: 'icon-G-stack-line'
        },
        children: []
      }
    ]
  },
  {
    path: '/login',
    name: 'login',
    component: () => import(/* webpackChunkName: "login" */ '@/views/login/index.vue'),
    meta: {
      title: '登录',
      hidden: true
    }
  }
]

总结

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

这里我们 分析了 动态路由 该如何做，后续该如何实现。