Vue3动态导入后端路由

  1. 动态获取文件
// modules就是一个map,文件路径作为key,文件对象作为value
const modules=import.meta.glob('../views/**/*.vue')

在这里插入图片描述

获取到的modules对象如下:

在这里插入图片描述

  1. 添加动态路由
import {createRouter, createWebHashHistory} from 'vue-router'const modules = import.meta.glob('../views/**/*.vue')const constantRoutes = [{path: '/login',name: 'login',meta: {title: '登录',hidden: true},component: () => import('../views/login/index.vue')},
]const router = createRouter({history: createWebHashHistory(),routes:[…constantRoutes]
})// 从后端动态获取的路由列表,[hidden:是否在侧边栏显示]
let dynamicRoutes = [{path: '/',name: 'Layout',redirect: '/home',component: '/views/layout/index',meta: {title: 'Layout',icon: 'HomeFilled',hidden: false},children: [{path: '/home',name: 'Home',component: '/views/home/index',meta: {title: '首页',icon: 'HomeFilled',hidden: false}},]},{path: '/sys',name: 'Sys',component: '/views/layout/index',meta: {title: '系统管理',icon: 'document',hidden: false},children: [{path: '/sys/user',name: 'User',component: '/views/sys/user/index',meta: {title: '用户管理',icon: 'document',hidden: false}},{path: '/sys/role',name: 'Role',component: '/views/sys/role/index',meta: {title: '角色管理',icon: 'document',hidden: false}},]}
]convertPathToComponent(dynamicRoutes)
addDynamicRoutes(dynamicRoutes)// 添加动态路由
function addDynamicRoutes(dynamicRoutes) {dynamicRoutes.forEach(item => {router.addRoute(item)})
}// 使用递归将routeList中每个对象及其子对象中的component路径转换为组件(在component不为空的情况下)
function convertPathToComponent(dynamicRoutes) {dynamicRoutes.forEach(item => {if (item.component) {item.component = modules['..' + item.component + '.vue'] || modules['../views/404/index.vue']}if (item.children) {convertPathToComponent(item.children)}})
}export default router

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/53920.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AutoGen实现多代理—AI Agentic Design Patterns with AutoGen(二)

1. AutoGen顺序对话在客户入职案例上的应用 如图,客户入职前会经历三个阶段,一个代理收集客户的信息,一个代理收集客户的感兴趣话题,一个代理根据前两个代理的基础信息与客户代理对话,产生聊天信息。 本节实验的地址&…

Cilium + ebpf 系列文章-什么是ebpf?(一)

前言: 这篇非常非常干,很有可能读不懂。 这里非常非常推荐,建议使用Cilium官网的lab来辅助学习!!!Resources Library - IsovalentExplore Isovalents Resource Library, your one-stop destination for ins…

【蚂蚁HR-注册/登录安全分析报告】

前言 由于网站注册入口容易被黑客攻击,存在如下安全问题: 暴力破解密码,造成用户信息泄露短信盗刷的安全问题,影响业务及导致用户投诉带来经济损失,尤其是后付费客户,风险巨大,造成亏损无底洞…

240929-CGAN条件生成对抗网络

240929-CGAN条件生成对抗网络 前面我们学习了GAN(240925-GAN生成对抗网络-CSDN博客)和DCGAN(240929-DCGAN生成漫画头像-CSDN博客),接下来继续来看CGAN(Conditional GAN)条件生成对抗网络。 流…

实习问题(配置文件获取参数)

Java中用SpringBoot框架,当我们要获取配置文件yml里的参数时,用Value注解获取 如果配置文件中没有srvSealUploadPath这个参数的话,可以用Value("${srvSealUploadPath:data/idoc/temp}"),这个的意思是,如果配…

【华为HCIP实战课程一】OSPF相关基础介绍及基础配置,网络工程师必修

一、OSPF介绍 开放式最短路径优先协议OSPF(Open Shortest Path First),IPv4使用的OSPFv2,针对IPv6使用OSPFv3协议。 二、为什么需要OSPF OSPF出现之前,网络广泛使用RIP路由协议,RIP由于最大16跳数限制无法适应大型网络,RIP是基于距离矢量算法的路由协议,应用在大型网…

PG数据库的Jsonb全文检索查询

1.操作键值对 PostgreSQL 对 jsonb 类型的筛选查询可以使用 -> 或者 ->> 操作符。 -> 操作符用于通过 JSON 对象中的键来获取对应的值。->> 操作符可以将获取到的值提取出来转化为字符串类型。 例如,下面是一个包含 jsonb 类型字段的表&#x…

状态模式原理剖析

《状态模式原理剖析》 状态模式(State Pattern) 是一种行为设计模式,它允许对象在其内部状态改变时改变其行为。换句话说,当对象状态发生变化时,它的行为也会随之变化。 通过状态模式,可以消除通过 if-else…

计241 作业2:C程序设计初步

问题 A: C语言实验——计算AB&#xff08;顺序结构&#xff09; 思路讲解: 这个直接计算ab就好&#xff0c;没有什么困难的&#xff0c;用来熟悉环境最适合不过 代码实现: #include<stdio.h>int main() {int a,b;scanf("%d %d",&a,&b);printf("…

[JavaEE] IP协议

目录 一、 IP协议 1.1 基本概念 1.2 协议头格式 1.3 特殊IP 二、 地址管理 2.1 网段划分 2.2 CIDR(Classless Interdomain Routing) 2.3 私有IP地址和公网IP地址 2.4 NAT(Network Address Translation)-网络地址转换 2.5 路由选择 三、数据链路层 3.1 认识以太网 3…

监控易监测对象及指标之:全面监控Sybase_New数据库

随着企业数据量的不断增长和业务的复杂化&#xff0c;数据库的稳定性和性能成为了保障业务连续性的关键因素。Sybase_New数据库作为众多企业选择的数据管理解决方案&#xff0c;其稳定性和性能对于企业的运营至关重要。 为了确保Sybase_New数据库的稳定运行和高效性能&#xff…

【CSS in Depth 2 精译_042】6.4 CSS 中的堆叠上下文与 z-index(下)——深入理解堆叠上下文

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第一章 层叠、优先级与继承&#xff08;已完结&#xff09;第二章 相对单位&#xff08;已完结&#xff09;第三章 文档流与盒模型&#xff08;已完结&#xff09;第四章 Flexbox 布局&#xff08;已…

Adobe Photoshop 2024 v25.12 (macOS, Windows) 发布下载 - 照片和设计软件

Adobe Photoshop 2024 v25.12 (macOS, Windows) - 照片和设计软件 Acrobat、After Effects、Animate、Audition、Bridge、Character Animator、Dimension、Dreamweaver、Illustrator、InCopy、InDesign、Lightroom Classic、Media Encoder、Photoshop、Premiere Pro、Adobe XD…

【unity进阶知识3】封装一个事件管理系统

前言 框架的事件系统主要负责高效的方法调用与数据传递&#xff0c;实现各功能之间的解耦&#xff0c;通常在调用某个实例的方法时&#xff0c;必须先获得这个实例的引用或者新实例化一个对象&#xff0c;低耦合度的框架结构希望程序本身不去关注被调用的方法所依托的实例对象…

收银系统源码-ERP进销存解决方案

收银系统目前已经成为门店日常经营的必备软件工具&#xff0c;功能一般需涵盖线下门店收银&#xff0c;ERP进销存、线上商城等。一套好的ERP进销存模块也能很大程度帮助门店经营管理门店。 ERP进销存功能涵盖了商品的采购、销售、调拨、盘点、库存管理、资金管理等全链路管理&…

对话总结:Scale AI的创始人兼CEO Alex Wang

AI的三大支柱 计算:主要由大公司如NVIDIA推动。算法:顶尖实验室如OpenAI主导。数据:Scale致力于推动数据进展。前沿数据的重要性 与人类智能相比较,前沿数据是AI发展的关键。互联网数据是机器与人类合作的结果。语言模型的发展 第一阶段:原始的Transformer论文和GPT的小规…

初识ZYNQ——FPGA学习笔记15

一、ZYNQ简介 ZYNQ&#xff1a;Zynq-7000 All Programmable SoC&#xff08;APSoC&#xff09;&#xff0c;赛灵思公司&#xff08;AMD Xilinx&#xff09;推出的新一代全可编程片上系统 PS&#xff1a;Processing System&#xff0c;处理系统 PL&#xff1a;Program Logic&…

html TAB切换按钮变色、自动生成table--使用函数优化结构

<!DOCTYPE html> <head> <meta charset"UTF-8"> <title>Dynamic Tabs with Table Data</title> <style> /* 简单的样式 */ .tab-content { display: none; border: 1px solid #ccc; padding: 1px; marg…

RTA-OS Port Guide学习(三)-基于S32K324 OS

文章目录 前言HardwareSupported DevicesRegister UsageInitializationModificationRequired OS resourcesInterruptsInterrupt Priority LevelsAllocation of ISRs to Interrupt VectorsVector TableWriting Category 1 Interrupt HandlersWriting Category 2 Interrupt Handl…

Qualitor processVariavel.php 未授权命令注入漏洞复现(CVE-2023-47253)

0x01 漏洞描述&#xff1a; Qualitor 8.20及之前版本存在命令注入漏洞&#xff0c;远程攻击者可利用该漏洞通过PHP代码执行任意代码&#xff0c;利用难度较低危害较大。 0x02 影响版本&#xff1a; Qualitor < 8.20 0x03 搜索语句&#xff1a; Fofa:app"Qualitor-…