深入了解VUE3实践 - 搭建后台(五)
前几篇文章我们已经把后台的基础搭建好了，感兴趣的朋友可以看看之前的基础搭建
前言
今天主要是讲后台的主体框架结构。在开始之前我们回顾一下，一般的后台都分成顶部，左侧菜单，右侧内容的经典布局模式。这样的布局模式我们是可以把这个的模式提取到一个公共的后台组件中来。下面我们就开始今天的
开始
在开始之前我们还是和往常一样，先看看今天的目录结构
总体的目录结构就是这样的了，其中的Admin.vue就是我们的后台布局主体了。下面我们来看看这个主体页面的代码吧。
Admin.vue
# 这个是admin的dom结构文件，
//头部
Header
//主题内容
//左侧菜单
/**
* 动态菜单，这里面我们使用的是element 的菜单组件
* 动态菜单的数据，我们将从store中获取
*/
{{ vo.title }}
//右侧主内容的展示
// 这个是用来展示对应组件的内容
下面我们来看看菜单的获取
# admin.vue 的js代码
# 这里我们主要是获取登录成功后，获取的菜单数据，我们可以把按钮的权限在菜单中一起返回
# 这样我们把按钮的权限处理到一个数组中，这里我们先讲菜单的展示
这样后台的主体结构我们就已经完成了。这时大家肯定好奇，我们要怎么使用呢？
不知道大家还记不记的，我们在第三章中，我们有一个BasicLayout。这个就是我们的
admin.vue的主体结构。
知识点：router.addRoute
在这一章中，我们主要的知识点就是动态添加新路由的addRoute函数。官网上说明这个函数是添加多个数组函数的。同时也可以添加一个子路由的。添加子路由的时候，我们需要在第一个函数中负值父组件。
addRoute(parentName: string, route: RouteConfig): () => void
以上就是我们今天的内容。
每天学习一点，进步一点。加油～～