前言
我们在项目开发的过程中，难免会使用路由，那么我们在开发多角色的时，由于每个角色的权限不同，因此访问到的页面肯定也要有所限制，这个时候我们就需要使用动态路由
实现效果 👊👊
使用的技术栈⛹⛹
- 使用了koa2来作为后端
- 使用vuex实现全局的数据共享
- vue3的语法
- 当然这里面还会使用一些算法(递归算法)
首先使用 vue create project-name 创建项目
后端使用koa2 项目名称 从创建项目
实现思路 ✌️✌️
首先我们先来捋一下实现的思路：
- 后端需要设计数据，这个数据包含路由的路径path，id ，pid（该路由的父级路由id）,title 这里面是要显示的内容
- 同样我们在前端可以模拟登录，创建几个用户，然后我们给用户设计的字段可以是这样的 id(用户id),name(用户姓名)
auth(权限设置，是一个数组，表明可以访问的路由的id)
- 前端通过axios来访问后端的数据，然后获取数据之后前端将其树形化（使用递归算法），然后我们可以将其转换为动态的路由结构（这部分可以封装一个工具函数来实现）
- 我们可以借助vuex来实现axios的异步请求，通过mutations来将值赋值给state中定义的数据。这样我们就可以实现全局的数据共享。
具体实现 🥇🥇
首先我们来设计数据
这部分是路由菜单
module.exports = [ { id: 1, pid: 0, //pid为0表明为顶层 path: "/course", name: "Course", title: "课程管理", }, { id: 2, pid: 1, path: "operate", name: "CourseOperate", Link: "course/operate", title: "课程操作", }, { id: 5, pid: 0, path: "/student", name: "Student", title: "学生管理", }, { id: 6, pid: 5, path: "operate", name: "StudentOperate", Link: "/student/operater", title: "学生操作", }, ... ];
当然这里面我只展示部分数据，其实可以依次类推，我们不难发现，pid是父级路由的id，这样做就是为了后期将数据加工成树形结构。
用户的数据：
module.exports = [ { id: 1, name: "张三", auth: [1, 2, 5, 6], }, { id: 2, name: "李四", auth: [1, 2, 4, 5, 6, 7], }, { id: 3, name: "王五", auth: [1, 2, 3, 4, 5, 6, 7], }, ];
正如我们之前所说，这个用户id包含这几个字段，其中auth这个字段无疑是最重要的，他是一个数组，里面存的时路由的id，表明为用户的访问权限。
封装一下axios函数
在这个小的项目里面，我们需要使用aixos函数来请求后端的数据，那么我们和不妨封装一个请求函数，这样更方便我们请求后端的数据
import axios from "axios"; import qs from "qs"; //这里面的uid是要传入的用户id值 function getUserRouters(uid) { return axios({ url: "http://localhost:3000/user_router_auth", method: "post", headers: { "Content-Type": "application/x-www-form-urlencoded", }, data: qs.stringify({ uid }), }) .then((res) => { return res.data; }) .catch((err) => { throw err; }); } export { getUserRouters };
其中url是后端的接口，data代表要传递的数据，qs.stringify表明将uid转换为json字符串。这个封装的函数最终会返回一个Promise.then（）。
使用vuex实现全局数据共享
action部分
用来做异步请求，获取后端的数据，并且将其进行树形化处理。
import { getUserRouters } from "@/service"; import { toTreeList } from "@/utils/utils"; export default { async setUserRouters({ commit, state }) { // 使用axios获取数据 const userRouters = await getUserRouters(state.uid); // 将获取到的后端数据树形化 const list = toTreeList(userRouters); console.log(list); commit("setAuth", true); commit("setUserRouters", list); }, };
mutations部分：
将获取到的数据存放在state中，便于进行全局访问。
export default { // 更改权限 setAuth(state, Auth) { state.hasAuth = Auth; }, // 将数据存储在state中 setUserRouters(state, userRouters) { state.TreeList = userRouters; }, };
state部分
export default { uid: 1, hasAuth: false, TreeList: [], };
将数据转化为树形化结构🛰🛰
function toTreeList(list, id = 0) { let res = []; list.forEach((item) => { if (item.pid === id) { item.children = toTreeList(list, item.id); // 这一步是为了是最里层的children会是空，应该删除 if (item.children.length == 0) delete item.children; res.push(item); } }); return res; }
思路：
在这个封装函数里面使用到了递归的思想，我们在设计数据的时候给每一个数据都设计了id和pid，那么最顶层元素的pid为0（没有父级元素），其他子级都拥有pid，所以我们可以这样操作，设计一个函数，默认传入从后端获取到的数据list，和最顶层元素pid值（默认为0）,然后我们对list进行遍历，判断list中的元素item的pid值与id是否相等，如果相等，那么item.children=toTreeList(list,item.id)来进行递归调用，这样当pid和id值不相同时，就会执行res.push(item)将元素push到res里面。
基础路由模块
import { createRouter, createWebHashHistory } from "vue-router"; const routes = [ { name: "home", path: "/", component: () => import("../views/Home.vue"), }, { name: "NotFound", path: "/:pathMatch(.*)*", component: () => import("../views/NotFound.vue"), }, ]; const router = createRouter({ history: createWebHashHistory(), routes, }); export default router;
当输入的路径不存在时就会跳转到NotFound这个组件显示这个页面
实现动态路由
function generateRouter(userRouters) { let newRouters = userRouters.map((r) => { let routes = { path: r.path, name: r.name, component: () => import(`@/views/${r.name}`), }; if (r.children) { routes.children = generateRouter(r.children); } return routes; }); return newRouters; }
其中传入的userRouters是经过树形化处理的数据，同样这里面还是需要进行递归调用，这里对路由进行了配置，包括路由的路径，名称，都从后端获取。然后判断传入的树形结构数据是否含有子元素，如果有就递归调用给routes追加children，然后将处理过的routes返回，最后再将newRouters返回。
在main.js中配置路由守卫
import router from "./router"; import store from "./store"; import { generateRouter } from "./utils/utils"; // 配置路由守卫 router.beforeEach(async (to, from, next) => { if (!store.state.hasAuth) { await store.dispatch("setUserRouters"); // 获取树形权限路由 const newRoutes = generateRouter(store.state.TreeList); console.log(store.state.TreeList); newRoutes.forEach((route) => { router.addRoute(route); }); next({ to: to.path }); } else { next(); } });
首先通过调用actions中的方法，在actions中根据当前用户的id来异步请求数据，然后在actions的方法中会调用mutations的方法将数据存储到state中，然后再调用generateRouter方法获取路由，在对获取的路由数组通过遍历调用addRoute来动态的添加路由。
总结 👱👱
通过这次对动态路由的小案例的完成，使我对vue-router有了一个更深的认知，以及在实际项目中对于动态路由的实现都有了一个基本的思路，并且也学会了如何使用递归来将数据转化为树形结构的数据。
