--- theme: channing-cyan --- 本文将在[《从零到一：搭建一个Vue3开发框架》](https://juejin.cn/post/7019625617943445512)基础上搭建Vue3后台管理系统，所以如果您没有看过上篇文章或者想了解如何从零到一搭建Vue3开发框架，可以先看一下上篇文章。 > 2022.3.13 更新\ > 前端技术变化很快，当初写这篇文章时 ElementPlus 和 Pinia 还没成熟，但是时至今日，它们已经是后台管理系统组件库和状态管理库更好的选择，所以我又搭了一个新的开发框架，如果你想了解搭建开发框架的过程，本文依然是一个不错的选择，如果你需要一个开发框架，请来这里 [vue3-element-admin2](https://github.com/zhenyuWang/vue3-element-admin2)。因为之前的开发框架已经把所有需要用到的库都集成完成，所以在此基础上，我们需要做的就是把后台管理系统相关的主体框架及组件编写完成即可，[《项目地址》](https://github.com/zhenyuWang/vue3-element-admin) 下面就让我们开始吧！ ## 1. 路由权限控制通常，如果用户未登录的情况下访问后台管理系统且目标页面不是登录页面，需要将用户路由指向登录页面进行登录，这一步可以通过vue-router的路由前置守卫实现，代码如下： ``` // 路由前置守卫 router.beforeEach((to) => { // 如果to需要鉴权 if (!to.meta.notNeedAuth) { // 获取userInfo const userInfo = store.getters.userInfo; // 如果未登录 if (!userInfo.name || !userInfo.roles.length) { return { name: "Login" }; } } }) ``` 这里我们用到了 `store.getters.userInfo.userId` 判断用户是否登录，实际项目中，大家可以根据实际项目需求进行该判断，比如判断 `cookie`,`seesion` 等。并且在登录成功后，在 `src/store/modules/permission.ts` 中进行了动态路由的添加，模拟登录成功后，动态添加该用户的权限路由。 ## 2. 封装页面主体框架后台管理系统的整理内容框架一般如下图所示： ![1.jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2f34d18532f241d3861b286380e9a58c~tplv-k3u1fbpfcp-watermark.image?) 左侧为 logo 及菜单区，右侧顶部为控制菜单展开收起的按钮，当前页面的面包屑导航，用户头像，点击下拉一般会有用户信息，修改密码，退出登录等快捷入口及操作，以及当前已打开页面的页签列表。在系统内点击左侧菜单切换页面的时候，页面主体框架是不变的，只有中间内容区切换展示对应业务页面，很自然的想到这一部分可以抽离出一个组件进行维护，业务页面通过 `router-view` 标签嵌套在主体框架中。在项目中，以上功能可以通过路由嵌套实现，调整后的首页路由如下： ``` { path: "/", name: "Root", component: Layout, redirect: "/home", children: [ { path: "home", name: "Home", meta: { title: "首页", icon: "el-icon-s-home", needCache: true, fixed: true, }, component: () => import("@/views/Home.vue"), }, ], } ``` 上面的 `Layout` 即为封装好的主体框架组件，`Home.vue` 代码如下： ``` ``` `HelloWorld.vue` ``` ``` 此时打开首页，即可看到如上图的首页内容。接下来，我们一步步编写 `Layout` 组件 ### 2-1. 左侧 logo ![2.jpg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/af1253c9d7e247ac95979bda95ab3e7c~tplv-k3u1fbpfcp-watermark.image?) 这里很简单，不需要多说，对应文件 `src/layout/components/SliderBar/Logo.vue` ### 2-2. 左侧菜单 ![3.jpg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bf38affc3e5a4dc1a18c17437ac66e91~tplv-k3u1fbpfcp-watermark.image?) 这一部分相对复杂一些，`src/layout/components/SliderBar/index.vue` 为主体文件，使用 `el-menu` 组件，内部遍历 `routes`,根据是否有子路由，选择使用 `el-submenu` 或者 `el-munu-item` 组件生成菜单，需要注意的是这里的 `Item` 组件需要给定 `name`，以便 `Item` 组件递归自调用时使用。 `src/layout/components/SliderBar/index.vue` ``` ``` `src/layout/components/SliderBar/Item.vue` ``` ``` 这里要说一下 `el-menu` 组件有一个 `collapse` 属性，控制菜单的展开收起，我们在 `store` 的`setting.js` 模块中维护了这个状态。 ### 2-3. 右侧 Collapse 组件该组件控制左侧菜单展开收起 `src/layout/components/NavBar/Collapse.vue` ``` ``` 针对页面 `resize` 展开收起的逻辑写在了 `src/layout/mixin/resize.js` 中，在 `src/layout/index.vue` 引入并进行混入。 ### 2-4. 右侧面包屑导航 `src/layout/components/Navbar/Breadcrumb.vue` 该组件动态展示当前页面路由，且当前页面的祖先路由可以点击进行跳转。 ### 2-5. 右侧头像下拉 `src/layout/components/Navbar/AvatarDropDown.vue` 该组件展示登录用户的头像，点击展开下拉，显示用户信息，修改密码，退出登录等功能。 ### 2-6. 右侧已访问路由列表 ![4.jpg](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/57d70a7adc8c407190405e6f6bf7cac2~tplv-k3u1fbpfcp-watermark.image?) `src/layout/components/Navbar/VisitedViews.vue` 改组件展示用户已经访问的路由，并且右键显示刷新，关闭，关闭其他，关闭所有菜单，功能相对复杂一些，对应数据状态存和修改数据方法放在 `src/store/modules/tagsView.ts` 中进行维护,当路由跳转时，通过路由后置守卫，将访问过的路由添加到 `store/tagsView` 中。至此，`lauyout` 相关组件封装完成，为了便于以后扩展，我们在 `src/layout/components` 下新建 `AppMain.vue` 对所有组件做引入及业务组件切换的动画封装 ``` ``` 最后 `src/layout/index.vue` 如下： ``` ``` ## 3. 解决页面刷新丢失 store 数据问题这是一个 `Vue` 项目老生常谈的问题了，因为我们搭建的是一个 `Vue` 单页应用，共享状态通过 [Vuex](https://next.vuex.vuejs.org/) 放在了 `store` 中进行维护，刷新页面后 `store` 中的数据进行了初始化，之前保存的状态就丢失了，解决这个问题，我们需要在 `store` 的引入过程中封装一下。新建文件 `src/utils/cacheStore.ts` ``` import store from "@/store"; //在页面加载时读取sessionStorage里的状态信息 const sessionStore = sessionStorage.getItem("store"); if (sessionStore) { store.replaceState(Object.assign({}, store.state, JSON.parse(sessionStore))); store.dispatch("permission/handleRoutes", null, { root: true }); } //在页面刷新时将vuex里的信息保存到sessionStorage里 window.addEventListener("beforeunload", () => { sessionStorage.setItem("store", JSON.stringify(store.state)); }); export default store; ``` `main.ts` 中 `store` 引入同时做调整 ``` import store from "@/utils/cacheStore"; ``` ## End 至此，本文就结束了，项目中其他的细节还是需要在项目代码中具体查看，本文只是把主体思路及节点讲述一遍，如有任何问题或建议，欢迎留言讨论！

{{ msg }}