Vue中如何实现动态路由的示例代码

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: "学生操作",
  },
  ...
];
?

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],
  },
];
?

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 };
?

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);
  },
};
?
?

export default {
 ?// 更改权限
 ?setAuth(state, Auth) {
 ? ?state.hasAuth = Auth;
  },
 ?// 将数据存储在state中
 ?setUserRouters(state, userRouters) {
 ? ?state.TreeList = userRouters;
  },
};
?

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;
}

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;

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;
}

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();
  }
});