vue3实现动态路由及菜单
作者：左直拳
一般来说，前端项目中的路由，很有可能是需要动态注册的。
因为菜单可能在管理系统中维护，还跟权限绑定，用户登录以后，需要动态展示菜单。
菜单往往跟路由挂钩，因此，路由需要动态注册。
具体如何实现呢？
思路是，系统只提供默认的路由，登录以后，读入菜单/路由数据，加载。
这其中，可能会出现默认路由与动态路由有重叠的情况。
处理办法是覆盖。数据结构方面，菜单与路由数据二合一。
一、项目结构
这是我们一个项目的公共框架的代码结构。
我们打算在src/modules/存放具体业务系统的代码，而外部是相对稳定，可以复用的框架代码。
二、默认路由
src/router/default.js，内容比较少，只有登录、首页、404三个。其余全都靠动态注册。
路由项中，自定义属性放在meta里。动态路由与默认路由的数据结构一致。
/**
* 默认路由
* 具体业务路由，应在src/modules/router里定义，或者从后端动态加载
*/
export default [
/**
* 路由项结构：
*{
path: "/",//路径，（必选；path、name、component是路由规定必选的元素）
也可以带参数，如 path: "/resource/detail/:id",
name: "路由名称，是路由唯一标识",（必选）
component: 指向组件，如 Home,或者() => import("../views/login/PageIndex.vue")，（必选）
meta: {//meta里的属性可以自定义，全部为可选项
text: "名称",//展示在菜单里，（可选）
navi: true, //导航条(一级菜单)，（可选）
noLogin: true, //无须登录即可浏览，（可选）
access: "work:sysmanage,work:resourcemanage",//权限标识，（可选）
},
children: [],
},
*/
{
path: "/login",
name: "login",
component: () => import("../views/login/PageIndex.vue"),
meta: {
noLogin: true, //无须登录即可浏览
},
},
{
path: "/",
name: "Home",
component: () => import("../views/PageIndex.vue"),
},
{
path: "/notAllow",
name: "notAllow",
component: () => import("../views/sys/notAllow.vue"),
},
];
export const HomeName = "Home";
三、动态注册
注册的时机是什么？在哪里注册？怎么注册？
答曰：登录之后注册；在路由守卫里注册；用router.addRoute()一个个加进去。
1、登录之后进行注册，在路由卫士里注册
所谓路由守卫，就是路由规则。这名字我是从网上抄过来的。
src/router/index.js
import { createRouter, createWebHashHistory } from "vue-router";
import routes from "./default";
import routeAssembler from "./setup";
import { hasAuthority } from "@/utils/login.js";
const router = createRouter({
history: createWebHashHistory(),
routes,
});
// 路由守卫
let registerRouteFresh = true;//是否还没有动态加载过
router.beforeEach((to, from, next) => {
const isLogin = localStorage.isLogin ? true : false;
if (isLogin) {
//已登录情况下验证权限
let isAccess = hasAuthority(to.meta.access);
if (!isAccess) {//没有权限
next("/notAllow");
return;
}
if (registerRouteFresh) {//还没有动态加载过
//动态注册路由 <----------------------------------------
routeAssembler(router);
registerRouteFresh = false;
next({ ...to, replace: true });
} else {
//已经登录了，不能再打开登录页
to.path === "/login" ? next("home") : next();
}
} else {
//如果无须登录则直接打开，否则转向登录页面
to.meta.noLogin || to.path === "/login" ? next() : next("/login");
}
});
export default router;
2、如何动态注册
src/router/setup.js，即上面例子中的routeAssembler：
/*
装配路由及菜单
*/
import fixItems from "./default"; //默认路由
import { HomeName } from "./default"; //统一命名首页路由项（参考前面的默认路由）
import projectItems from "@/modules/router"; //具体业务系统的路由
export default (router) => {
//获得动态路由
const dynaItems = getDynamicItems();
//对齐首页(统一命名首页)
adpatHome(HomeName, dynaItems);
//添加动态路由
dynaItems.forEach((value) => {
router.addRoute(value);
});
};
const getDynamicItems = () => {
/*
获取动态路由，从指定文件加载或从后端获取
*/
return projectItems;
};
//默认路由与业务路由对齐首页的路由信息
//所谓对齐，就是大家的name保持一致，这样才能保证动态加入的路由项，覆盖掉前面的path和name相同的路由
const adpatHome = (HomeName, dynaItems) => {
let home = dynaItems.filter((item) => {
return item.path === "/";
});
if (home.length > 0 && home[0].name !== HomeName) {
/**
* 如果业务路由定义了首页，但其name与默认路由首页的name不相同
* 则将业务路由中首页项的name置为默认名称
* 因为按照vue-router的规则，addRoute的时候，如果存在同名同路径的路由项，则覆盖之
* 我们要的就是覆盖默认，以业务路由设置为准
*/
home[0].name = HomeName;
}
};
这里面有个如果动态路由，与默认路由中存在相同的路由项，该如何处理的问题。
按照vue3的router规则，如果后面加进来的路由项，仅仅是path相同，而name不同，则不算是相同的路由项，addRoute()进去之后，仍然是原先的路由项起作用；但如果是path和name都相同，则原先的会被覆盖（我怀疑是name相同就会被覆盖）。
所以，默认路由中有首页路由，指向框架代码中的默认首页；加载动态路由后，该路由被覆盖，指向了具体业务系统的首页。这也表明，我们无须自己手动删除已加载的同名路由项。
事实上，删除还会报错。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。