Vue3动态路由和菜单普通来说，
网易微专业安卓高级开发工程师和广泛的
download：https://www.51xuebc.com/thread-492-1-1.html
备用：3w 51xuebc com
前端项目中的道路很可能需求动态注册。由于菜单可能在管理系统中维护，并与权限绑定，用户需求在登录后动态显现菜单。菜单通常链接到路由，因而路由需求动态注册。
详细怎样完成？想法是系统只提供默许道路。登录后，读入菜单/道路数据并加载。其中，默许路由可能与动态路由堆叠。处理办法是掩盖。在数据构造上，菜单和路由数据是二合一的。
一、项目构造这是我们一个项目的通用框架的代码构造。我们打算将详细业务系统的代码存储在src/modules/中，而外部代码是相对稳定且可重用的框架代码。二、默许路由Src/router/default.js，内容较少，只要登录、主页和404。剩下的就靠动态注册了。
在路由项中，自定义属性放在meta中。动态路由的数据构造与默许路由的数据构造分歧。
/***默许道路*详细的效劳路由应该在src/modules/router中定义，或者从后端动态加载。*/导出默许值[/***工艺道路项目构造:*{途径:"/"，//途径，(必选；途径、称号和组件是路由规则的必需元素)也能够带参数，比方path: "/resource/detail/:id "，称号:“道路的称号，这是道路的独一标识符”，(必需)组件:指向一个组件，比方Home，或者()= > import(“../views/login/pageindex.vue ")，(必需)Meta:{//Meta中的属性能够自定义，都是可选的。text:“name”，//显现在菜单中，(可选)Navi: true，//导航栏(一级菜单)，(可选)NoLogin: true，//不用登录就能够阅读，(可选)Access: "work: sysmanage，work:resource manage " ,//权限ID，(可选)},孩子:[]，},*/{途径:"/登录"，称号:“登录”，组件:()= >导入("../views/login/PageIndex.vue ")，元:{NoLogin: true，//不用登录就能够阅读。},},{途径:"/"，称号:“家”，组件:()= >导入("../views/PageIndex.vue ")，},{途径:"/notAllow "，称号:“不允许”，组件:()= >导入("../views/sys/notAllow.vue ")，},];
export const HomeName = " Home
三。动态注册什么时分注销？我能在哪里注册？如何注册？
答:登录后注册；在路由维护中注册；用router.addRoute()逐一添加。
1.登录后注册，在路由守护中注册。
所谓路由卫士，就是路由规则。这个名字是我从网上抄的。
src/路由器/index.js
从“vue-router”导入{ createRouter，createWebHashHistory }；从" "导入道路。/default "；从“”导入routeAssembler。/setup "；从“@/utils/login.js”导入{ has authority }；
const router = createRouter({history: createWebHashHistory()，道路，});
//路由维护让registerRouteFresh = true//能否还没有动态加载router.beforeEach((to，from，)=> {const is login = local storage . is login？真:假；if (isLogin) {//登录时考证权限设is access = hasAuthority(to . meta . access)；假如(！IsAccess) {//没有权限下一步("/notAllow ")；返回；}If (registerRouteFresh) {//尚未动态加载。//动态注册路由routeAssembler(路由器)；registerRouteFresh = false下一个({...to，replace:true })；}否则{//您曾经登录。您不能再次翻开登录页面。to.path === "/login "？next(" home "):next()；}}否则{//不需求登录就直接翻开，否则进入登录页面。to . meta . nologin | | to . path = = = "/log in "？next():next("/log in ")；}});
导出默许路由器；
2.如何动态注册？Src/router/setup.js，也就是上面例子中的routeAssembler:
/*路由和菜单*/从“”导入修复项目。/default "；//默许路由从“”导入{ HomeName }。/default "；//统一命名首页路由项(参照之前的默许路由)从“@/模块/路由器”导入项目项；//详细业务系统的路由
导出默许值(路由器)=> {//获取动态路由const dyna items = getDynamicItems()；
//对齐首页(统一命名首页)adpatHome(HomeName，dyna items)；
//添加动态路由dynaItems.forEach((值)=> {router.addRoute(值)；});};
const getDynamicItems = () => {/*获取动态路由，从指定文件加载或从后端获取。*/返回projectItems};
//默许路由与效劳路由主页的路由信息对齐。//所谓对齐，就是大家的名字分歧，这样才干保证动态添加的路由项掩盖之前途径和名字相同的路由。const adpatHome = (HomeName，)=> {let home = dyna items . filter((item)= > {return item . path = = = "/"；});if (home.length > 0 && home[0])。名字！== HomeName) {/***假如效劳路由定义了主页，但其称号不同于默许路由主页的称号。*效劳道路中第一页项目的称号被设置为默许称号。*由于依据vue-router的规则，在添加路由的时分，假如有相同称号相同途径的addRoute项，就掩盖它。*我们想要的是掩盖默许设置，这取决于业务路由设置。*/首页[0]。name = HomeName}};
有一个问题是，假如动态路由与默许路由有相同的路由项，该如何处置。
依据vue3的addRouter规则，假如添加的路由项只是途径相同但称号不同，则不是相同的路由项。添加route()后，原来的路由项依然有效。但是，假如途径和称号都相同，原始的将被掩盖(我疑心相同的称号将被掩盖)。所以默许路由中有一个主页路由，指向帧代码中的默许主页；加载动态路由后，该路由将被掩盖，并指向特定业务系统的主页。这也意味着我们不需求手动删除已加载的同名路由项。其实删除也会出错。