Vue中如何实现动态路由的示例代码（vue动态路由写法）学到了

随心笔谈2年前发布编辑

161 0

🌐 经济型：买域名、轻量云服务器、用途：游戏网站等《腾讯云》特点：特价机便宜适合初学者用点我优惠购买

🚀 拓展型：买域名、轻量云服务器、用途：游戏网站等《阿里云》特点：中档服务器便宜域名备案事多点我优惠购买

🛡️ 稳定型：买域名、轻量云服务器、用途：游戏网站等《西部数码》特点：比上两家略贵但是稳定性超好事也少点我优惠购买

目录前言实现效果使用的技术栈实现思路具体实现首先我们来设计数据封装一下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，表明为用户的访问权限。

在这个小的项目里面，我们需要使用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（）。

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

思路：

在这个封装函数里面使用到了递归的思想，我们在设计数据的时候给每一个数据都设计了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(“https://www.jb51.net/views/Home.vue”),
},
{
? ?name: “NotFound”,
? ?path: “/:pathMatch(.*)*”,
? ?component: ()=> import(“https://www.jb51.net/views/NotFound.vue”),
},
];
?
const router=createRouter({
?history: createWebHashHistory(),
?routes,
});
?
export default router;

当输入的路径不存在时就会跳转到NotFound这个组件显示这个页面

其中传入的userRouters是经过树形化处理的数据，同样这里面还是需要进行递归调用，这里对路由进行了配置，包括路由的路径，名称，都从后端获取。然后判断传入的树形结构数据是否含有子元素，如果有就递归调用给routes追加children，然后将处理过的routes返回，最后再将newRouters返回。

import router from “https://www.jb51.net/javascript/router”;
import store from “https://www.jb51.net/javascript/store”;
import { generateRouter } from “https://www.jb51.net/javascript/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?动态路由component?传递变量报错问题解决vue-router4动态路由刷新404/白屏的解决Vue router动态路由实现过程Vue实现动态路由导航的示例vue实现动态路由添加功能的简单方法(无废话版本)Vue动态路由路径重复及刷新丢失页面问题的解决