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

汽车保养BBBBBBBBBBB

小保养就是机油和机滤,4s店比较贵,可以在京东上买机油,可以包安装 极护、磁护 两款机油配方不同,极护系列机油注入液钛配方,拥有特别的油膜自适应能力,在各种形式条件下均能有效减少金属间的直接接触&…

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

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

unittest初始化,资源清理,执行所有测试用例,跳过测试用例,输出测试结果的详细程度以及discover加载文件里面的所有匹配到的.py测试用例

前言 # setUp和tearDown 每次用例执行前都会执行初始化条件和结束条件 # 执行所有用例只运行一次初始化和清理条件,用setupclass,teardownclassimport unittestclass UserTestCase(unittest.TestCase):classmethoddef setUpClass(cls):print("setU…

【蚂蚁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}"),这个的意思是,如果配…

ros的工作空间

Create a ROS Workspace创建一个ros工作空间 $ catkin_make该命令可以在当前目录下的“src”文件夹中创建CMakeLists.txt链接。会自动生成build和devel文件,以下是 catkin_make 的几个主要作用: 构建 ROS 包:catkin_make 会在当前工作空间中…

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

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

Cesium GIS项目关于湖泊识别与提取的实现

1. 引言 项目背景 随着遥感技术的发展,地理信息系统的应用越来越广泛。本项目旨在开发一个基于Cesium的地理信息系统,利用深度学习技术自动识别并显示湖泊的位置。 目标与意义 通过自动化处理大量遥感影像数据,提高湖泊监测的效率和准确性,为水资源管理和环境保护提供支…

uniapp js判断key是否在json中?

推荐学习文档 golang应用级os框架,欢迎stargolang应用级os框架使用案例,欢迎star案例:基于golang开发的一款超有个性的旅游计划app经历golang实战大纲golang优秀开发常用开源库汇总想学习更多golang知识,这里有免费的golang学习笔…

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

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

Python程序:设计一个多维度数据聚合系统:从概念到实现

设计一个多维度数据聚合系统:从概念到实现 在现代数据驱动的世界中,企业和组织需要处理和分析大量的数据,以便做出明智的决策。数据聚合系统是实现这一目标的关键工具之一。本文将详细介绍如何设计和实现一个支持多维度数据汇总的数据聚合系统,使用Python编程语言。我们将…

状态模式原理剖析

《状态模式原理剖析》 状态模式(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…

nvm以及npm源配置

配置 NVM 和 NPM 使用镜像源 接上一篇。国内使用会遇到网络连接问题。为了解决这个问题&#xff0c;我们可以配置 NVM 和 NPM 使用腾讯的源。 配置 NVM 源 首先&#xff0c;我们需要配置 NVM 源。可以使用以下命令&#xff1a; export NVM_NODEJS_ORG_MIRRORhttps://mirrors.…

使用php生成图片

可以用这方法生成图片 水印 字体可以在资源绑定下载&#xff0c;如果字体路径不对&#xff0c;则不会输出文字图片 public function generateImage($text,$id) { header("Cache-Control: no-cache, must-revalidate"); header("Expires: Mon, 26 Jul 1997 05:0…

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

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