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

Victoria ·

更新时间:2024-05-15

· 491 次阅读

前言

实现效果

使用的技术栈

实现思路

具体实现

首先我们来设计数据

封装一下axios函数

使用vuex实现全局数据共享

将数据转化为树形化结构

基础路由模块

实现动态路由

在main.js中配置路由守卫

总结

前言

我们在项目开发的过程中，难免会使用路由，那么我们在开发多角色的时，由于每个角色的权限不同，因此访问到的页面肯定也要有所限制，这个时候我们就需要使用动态路由

实现效果

使用的技术栈

使用了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有了一个更深的认知，以及在实际项目中对于动态路由的实现都有了一个基本的思路，并且也学会了如何使用递归来将数据转化为树形结构的数据。

到此这篇关于Vue中如何实现动态路由的示例代码的文章就介绍到这了,更多相关Vue 动态路由内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！

VUE 示例动态路由路由动态

1024 个赞