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