今天学一个Vue小应用：通过实例聊聊如何实现动态路由。我们在项目开发的过程中，难免会使用路由，那么我们在开发多角色的时，由于每个角色的权限不同，因此访问到的页面肯定也要有所限制，这个时候我们就需要使用动态路由，先看个效果图：
当改变url路径的时候，右边的页面会随之变化数据和显示。如何实现呢？往下看吧。
使用的技术栈
使用了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有了一个更深的认知，以及在实际项目中对于动态路由的实现都有了一个基本的思路，并且也学会了如何使用递归来将数据转化为树形结构的数据。
网友评论文明上网理性发言 已有0人参与
发表评论: