携手创作,共同成长!这是我参与「掘金日新计划 · 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 做出一个 后台系统 项目
这里我们 分析了 动态路由 该如何做,后续该如何实现。