vue-router实现动态路由
1. 什么是动态路由
动态路由不同于常见的静态路由，静态路由 是前端配置好的一套路由列表，在项目中登录后即可访问配置好的路由页面，也不会因为账号的不同有所限制；而 动态路由 则相反，如果账号权限不同，我们将会设置不同的路由列表，从而限制账号访问的页面。
动态路由是是可变的，而不是写死的，常见的是通过接口返回路由数据来进行匹配，如果匹配到和权限一至的路由就动态增加到项目中。
2. 动态路由的数据存储
这里讲述下项目中的路由数据存储方式：
2.1 后端存储路由对应的 code 码
code 码映射
// 首页 => 1001
// 资源管理 => 1002
// 权限管理 => 1003
// 审批管理 => 1004
接口返回值会根据不同的账号权限返回 code 码集合
// 管理员: [1001, 1002, 1003, 1004]
// 小明: [1001, 1002]
...
2.2 前端创建数组，将所有的 code 映射成一个路由数据
路由组件的获取，这里使用的是 Map对象，并且给每一个路由提供一个 key；路由列表中的 compontent 字段的值，将通过 key 去 Map 对象中获取
// 2.1 设置 Map 对象存储懒加载组件
const asyncRouter = new Map();
asyncRouter.set("home", () => import("@/views/home/index.vue"));
// 2.2 设置 code 码映射的路由数组，将其和返回值 code 对比取出匹配到的数据
const asyncRouter = [
{
path: "/home",
name: "/home",
meta: {
title: "首页",
cn: "首页",
en: "Home",
icon: "home",
},
component: routerMapping.get("home"),
code: "1001",
},
// ...
];
3. 使用到的 API
这里主要讲述 vue-router 中提供的可以进行动态添加路由的 API
3.1 Vue Router 全局前置守卫
router.beforeEach 会注册一个全局前置守卫，当我们在路由跳转时，会自动触发 路由守卫函数，主要用来做一些页面进入的限制，比如：没有登录就不能进入某些特定页面。官网解释
// 常规写法
router.beforeEach((to, from, next) => {
// to: 跳转到哪个路由
// from: 从哪个路由跳转过来
// next: 跳转函数，可以跳转到具体的 url
});
// 含有异步操作的方法
router.beforeEach(async (to, from, next) => {
const res = await fetch("****");
// to: 跳转到哪个路由
// from: 从哪个路由跳转过来
// next: 跳转函数，可以跳转到具体的 url
});
3.2 router.addRoutes()
addRoutes() 可以在应用程序运行的时候添加路由，它表示注册一个新的路由到我们程序上；如果新增加的路由与当前位置相匹配，就需要手动使用 router.push() 或 router.replace() 导航，才能正常展示新的路由页面。官网解释
// 添加路由
router.addRoute({ path: "/about", component: About });
// 将嵌套路由添加到现有的路由中
router.addRoute("home", { path: "settings", component: AdminSettings });
// 手动跳转
router.replace("/about")
4. 具体的实现思路
这里主要讲述实现的思路，以及过程。
4.1 路由守卫中发送请求获取路由数据
router.beforeEach(async (to, from, next) => {
if (isLogin()) {
let { data } = await axios.get("/getAuthorList");
} else {
/* 没有token值*/
const isWihte = whiteList.some((v) => to.path.indexOf(v) !== -1);
// 在免登录白名单，直接进入;否则全部重定向到登录页
if (isWihte) {
next();
} else {
next(`/login`);
}
}
});
由于路由守卫函数支持 async await 所以需要进行 async 改写，发送请求。这里主要是获取到该用户的权限菜单 code 码
4.2 数据处理
将获取到的数据和前端存储的映射对象进行 code 码对比，获取到符合的路由信息，并组成路由对象的格式
let { data } = await axios.get("/getAuthorList");
const routerList = handleRouter(data);
// 处理的数据格式为
let routerList = [
{
path: 'path',
name: 'path',
meta: {
title: 'title',
cn: 'name',
en: 'enName',
icon: 'icon',
},
component: VueCompontent,
children: [***],
},
];
4.3 addRoutes() 动态添加路由
这一步主要是添加路由到指定的路由中，或者直接添加即可；添加路由后需要动态添加一个 404，防止跳转到不存在的页面；最后需要手动执行下 next() 进行跳转。这样就能跳转到动态添加的页面了。
routerList.forEach((item) => {
router.addRoute("home", item);
});
// 添加404路由：vur-router 4.x版本写法
router.addRoute({ path: "/:catchAll(.*)", redirect: "/404" });
// 跳转
next({ path: to.path, replace: true });
4.4 pinia 仓库存储数据，增加判断
当我们进入到页面时，页面的菜单栏数据应该与我们获取到的权限数据保持一致，所以我们需要增加数据存储，来展示有效的菜单。
当我们在跳转时，由于请求时在守卫函数中处理的，所以，当我们跳转时，必定会重复被拦截，从而导致页面 死循环，所以我们需要增加一个判断，这时候就可以利用我们存储的值进行判断，来避免死循环。
// pinia
export const useMenuStore = defineStore("menu", () => {
let routerList = ref([]);
const setRouterList = (routes) => {
routerList.value = routes;
};
});
// router.beforEach
routerList.forEach((item) => {
router.addRoute("home", item);
});
// ...
menuStore.$patch((state) => {
state.routerList = routerList;
});
// 死循环判断
if (menuStore.routerList.length === 0) {
// 在这里进行发送请求即可
let { data } = await axios.get("/getAuthorList");
const routerList = handleRouter(data);
} else {
next();
}
4.4 菜单渲染
项目中使用的是 element-plus 的组件，所以直接从仓库中取出数据循环即可
<el-menu
:default-active="currIndex"
:unique-opened="true"
:router="true"
:collapse-transition="false"
>
<template v-for="item in menuList" :key="item.path">
<!-- 一级菜单 -->
<el-sub-menu
v-if="item.children && item.children.length > 0"
:index="item.path"
popper-class="menu-class"
>
<template #title>
<i class="iconfont" :class="'icon-' + item.meta?.icon"></i>
<span>{{ item.meta?.title }}</span>
</template>
<el-menu-item-group>
<!-- 二级菜单 -->
<div v-if="isCollapse" class="secMenuTitle">{{ item.meta?.cn }}</div>
<el-menu-item
v-for="itemChild in item.children"
:index="itemChild.path"
:key="itemChild.path"
>
<span>{{ itemChild.meta?.cn }}</span>
</el-menu-item>
</el-menu-item-group>
</el-sub-menu>
<!-- 一级菜单：无子菜单 -->
<el-menu-item v-else :index="item.path">
<i class="iconfont" :class="'icon-' + item.meta?.icon"></i>
<template #title>
<span style="font-size: 16px" class="menuTitle"
>{{ item.meta?.cn }}</span
>
</template>
</el-menu-item>
</template>
</el-menu>
<script setup>
import { storeToRefs } from "pinia";
import { useMenuStore } from "@/store/menu";
const {
routerList: menuList,
isCollapse,
currIndex,
} = storeToRefs(menuStore);
</script>
4.5 核心代码
// 路由守卫
router.beforeEach(async (to, from, next) => {
const menuStore = useMenuStore();
// 判断是否登录
if (isLogin()) {
if (menuStore.routerList.length === 0) {
let { data } = await getAsyncRouter();
const routerList = handleRouterItem(data);
menuStore.$patch((state) => {
state.routerList = routerList;
});
routerList.forEach((item) => {
router.addRoute("home", item);
});
router.addRoute({ path: "/:catchAll(.*)", redirect: "/404" });
next({ path: to.path, replace: true });
} else {
next();
}
} else {
// 白名单可以跳转，否则全部重定向到登录页
const isWihte = whiteList.some((v) => to.path.indexOf(v) !== -1);
if (isWihte) {
next();
} else {
next(`/login`);
}
}
});
5. 遇到的问题
Q: 路由死循环？
A: 死循环是因为路由每次跳转时，都会被路由拦截器拦截，由于是动态添加的路由，所以需要手动 next({path: to.path}) 跳转，而每次手动 next 跳转时又会被拦截，所以此过程会不断重复导致死循环。
Q: router 文件中，使用 pinia 报错？
A: 在 Vue 3 中，无论 main.js 里的 app.use(pinia) 写在 app.use(router) 前面还是后面，vue-router，总是先初始化，所以会出现 pinia 使用报错。所以我们在使用 pinia 时需要在 router.beforeEach 函数中进行仓库初始化。
// router/index.ts
import { useMenuStore } from "@/store/menu";
// 写在这里会报错
const menuStore = useMenuStore();
router.beforeEach(async (to, from, next) => {
// ***
});
// 正常获取
router.beforeEach(async (to, from, next) => {
// 不报错
const menuStore = useMenuStore();
// ***
});
投递携程等公司6个岗位 >
查看7道真题和解析