前言

今天要做什么？
先继续看代码吧，昨天看了看项目的一个layout布局的左侧布局模式显示逻辑控制
今天就来看看这个左侧布局模式的详细写法吧：
1.如何实现的左侧布局
2.如何实现左侧布局相应的功能的
3.动态样式控制是怎么写的？

本文中所解读的项目代码地址

本文中我们称呼该项目为X
https://github.com/un-pany/v3-admin-vite

先看看布局（左侧布局模式）怎么写的

看起来很简单

看看ts代码部分

获取到计算属性isMobile和isLeft
获取到appStore （包含设备信息，侧边栏的opnened和withoutAnimation状态，切换，关闭侧边栏的方法，切换设备类型的方法）
获取到settingsStore （包含一个state，侧边栏的多个功能控制state：是否显示按钮和面板、标签栏、logo。页脚等，并且动态监听了该state的各个属性值的变化，然后持久化存储state最新值在localstorage中）
获取到使用pinia工具函数storeToRefs 将 settingsStore的state和getters转化出来的对象的showTagesView和fixedHeader（功能按钮）
/** 定义计算属性 layoutClasses，用于控制布局的类名 */
	隐藏侧边栏：!appStore的siderbar的opened
	开启侧边栏：appStore的siderbar的opened
	withoutAnimation:appStore的siderbar的withoutAnimation
	mobile:计算属性isMobile的value
	noLeft:!计算属性isLeft的value


处理mobile段点击侧边栏遮罩层的方法
	触发appStore的关闭侧边栏方法

上面的东西看起来都是获取其它东西的，我们需要找到在哪控制这些变量进行变化的。

侧边栏Sidebar (layouts/components/Sidebar/index.vue)

使用div作为最外部 ，且附加一个一个动态class根据计算属性isLogo（来自settingsStore的是否显示logo&&计算属性isLeft）
	使用el-scrollbar滚动条作为包裹，且设置了包裹容器的自定义类名为scrollbar-wrapper
		使用el-menu作为导航栏：通过acitveMenu（计算属性：路由route(useroute创建)的元属性的activeMenu【创建 router 时传入的路由配置中的 meta属性。】或者路由的路径route.path 【/usersform】）控制默认active的导航项
		提问：为何我在项目中并为没有搜索到activeMenu的定义

提问：还有必要继续看下去吗，目前侧边栏使用的elementplus提供的组件来实现了侧边栏的功能，所以关于功能的实现我们没有必要继续看，我们看的是代码的拆分，

回答：接下来简单看看其它几个模式下侧边栏sidebar和appMain吧

AppMain (layouts/components/AppMain/index.vue)

简单来讲就是在父组件中使用v-slot获取到router-view将要渲染的组件，然后使用transitoin过度动画包裹住获取到的component 实现对多个组件的过度动画统一

之后我们要探究的就是不同路由下渲染的页面了吧。

明天看什么?

看看路由功能吧，我们之前只看了路由前置守卫，还没有看路由模块的其它功能，如：

关于路由

• 如果拥抱命运也是一种反抗，那这一次我将拥抱死亡 *

概览

index.ts

重置路由

*解释 *

• 拿到router的所有路由信息并循环每个元素，循环中拿到路由名和路由元信息
• 如果路由名和元信息中记载的roles.length存在
• 则检查当前路由配置中是否存在名为 name的路由 如果存在该路由则后面的router.removeRout（name）也会执行
• 从而删除名为name的路由
• catch：强制刷新浏览器。
  

在哪里用到
userStore 中登出功能会用到

config.ts

解释
定义一个接口RouterConfig

// 获取路由历史模式配置
// 获取应用部署的公共路径

提问

创建以RouterConfig为类型约束的常量对象routerConfig,包括
history，dynamic，defaultRoles,thirdLevelRouteCache,
提问：routerConfig的作用

• guard.ts中：生成可访问的Routes，根据dynamic的状态判断，开启后会需要后端配合，在查询用户详情接口返回当前用户可以用来判断并加载动态路由的字段（该项目用的是角色 roles 字段）

*提问：routerConfig在哪里会被用到

helper.ts

路由降级方法： flatMultiLevelRoutes，
传入路由数组
深度克隆路由数组后得到routesMirror
循环routesMirror
用isMultipleRoute方法判断每个路由元素路由层级是否大于2
如果大于2则
用promoteRouteLevel方法将该路由传入，再用createRouter方法创建一个routes为：[该传入路由]的router用于获取该路由的所有路由信息
用addToChildren方法 ：将给定的子路由添加到指定的路由模块中

提问: 为什么要进行路由降级

whitelist.ts

guard.ts

registerNavigationGuard方法
用于设置路由前置守卫和全局后置钩子

全局前置守卫

• 加载动画启动
• 获取userStore
• 获取permissionStore:
  创建路由数组，使用响应式引用函数ref且以RouteRecordRaw[]作为类型约束创建了一个空数组
  创建有访问权限的路由数组，创建使用响应式引用函数ref且以RouteRecordRaw[]作为类型约束创建了一个空数组
  创建setRoutes方法：
  传入roles参数（角色权限数组）
  使用filterDynamicRoutes方法从dynamicRoutes（创建自index.ts的动态路由数组）
  中根据传入的roles选出拥有对应roles的路由数组
  使用set方法将筛选出来的拥有对应roles的路由数组赋值给addRoutes,
  set方法，
  将直接将constantRoutes数组（index.ts中定义的常驻路由数组，/redirect,/403/,…）和传入的路由数组合并,合并后的值作为routes（路由数组）的值
  根据routerConfig的的thirdLevelRouteCache（是否开启三级及其以上路由缓存功能）判断是否使用flatMultiLevelRoutes方法将传入数组进行路由降级后赋值或者直接赋值给
  有访问权限的动态路由数组
  创建setAllRoutes方法（所有路由 = 所有常驻路由 + 所有动态路由）
  使用set方法 传入dynamicRoutes创建自index.ts的动态路由数组）
  *