当前位置: 首页 > news >正文

【Vue3-vite】动态导入路由

route文件结构

  • router
    • module
    • index.ts

路由定义

// 需要导入的路由如下:
const routes = [{path: '/manage',name: 'manage',component: () => import('@/views/home/index.vue'),children: manageRoutes,}]

index.ts实现从module中自动导入

// 动态导入
const routeFiles = `import.meta.globEager`('./module/*.ts')
Object.keys(routeFiles).forEach((routePath) => {const fileModule = routeFiles[routePath].defaultmanageRoutes.push(...fileModule)
})

import.meta.glob与import.meta.globEager的区别

glob为异步加载,而globEager为同步加载

  • glob获取文件的promise函数,需要执行才能返回文件内容。如:
const routeFiles = import.meta.glob('./module/*.ts')
Object.keys(routeFiles).forEach(async (routePath) => {const fileModule = await routeFiles[routePath]()manageRoutes.push(...fileModule)
})

使用上述代码自动导入路由需要在路由注册前执行完,会影响系统性能,不建议
可以用于整组件的导入,如svg组件的使用

  • globEager获取到的值为( 文件路径:导出内容)的对象
const routeFiles = import.meta.globEager('./module/*.ts')
Object.keys(routeFiles).forEach((routePath) => {const fileModule = routeFiles[routePath].defaultmanageRoutes.push(...fileModule)
})

同步执行,不影响系统性能,推荐用来做路由的自动导入

相关文章:

【Vue3-vite】动态导入路由

route文件结构 router moduleindex.ts 路由定义 // 需要导入的路由如下: const routes [{path: /manage,name: manage,component: () > import(/views/home/index.vue),children: manageRoutes,}]index.ts实现从module中自动导入 // 动态导入 const routeFil…...

C++——string类

前言:哈喽小伙伴们,从这篇文章开始我们将进行若干个C中的重要的类容器的学习。本篇文章将讲解第一个类容器——string。 目录 一.什么是string类 二.string类常见接口 1.string类对象的常见构造 2.string类对象的容量操作 3. string类对象的访问及遍…...

进制转换md5绕过 [安洵杯 2019]easy_web1

打开题目 在查看url的时候得到了一串类似编码的东西,源码那里也是一堆base64,但是转换成图片就是网页上我们看见的那个表情包 ?imgTXpVek5UTTFNbVUzTURabE5qYz0&cmd 我们可以先试把前面的img那串解码了 解码的时候发现长度不够,那我们…...

.kat6.l6st6r勒索病毒的最新威胁:如何恢复您的数据?

导言: 在当今数字化时代,数据安全变得至关重要。然而,随着网络威胁不断增加,勒索病毒已成为企业和个人面临的严重威胁之一。其中,.kat6.l6st6r勒索病毒是最新的变种之一,它能够加密您的数据文件&#xff0…...

Day 6.有名信号量(信号灯)、网络的相关概念和发端

有名信号量 1.创建: semget int semget(key_t key, int nsems, int semflg); 功能:创建一组信号量 参数:key:IPC对像的名字 nsems:信号量的数量 semflg:IPC_CREAT 返回值:成功返回信号量ID…...

MySQL 常用优化方式

MySQL 常用优化方式 sql 书写顺序与执行顺序SQL设计优化使用索引避免索引失效分析慢查询合理使用子查询和临时表列相关使用 日常SQL优化场景limit语句隐式类型转换嵌套子查询混合排序查询重写 sql 书写顺序与执行顺序 (7) SELECT (8) DISTINCT <select_list> (1) FROM &…...

算法刷题day22:双指针

目录 引言概念一、牛的学术圈I二、最长连续不重复序列三、数组元素的目标和四、判断子序列五、日志统计六、统计子矩阵 引言 关于这个双指针算法&#xff0c;主要是用来处理枚举子区间的事&#xff0c;时间复杂度从 O ( N 2 ) O(N^2) O(N2) 降为 O ( N ) O(N) O(N) &#xf…...

山人求道篇:八、模型的偏差与交易认知

原文引用https://mp.weixin.qq.com/s/xvxatVseHK62U7aUXS1B4g “ CTA策略一波亏完全年,除了交易执行错误导致的以外,这类策略都是多因子策略,一般会用机器学习组合多因子得出一个信号来进行交易。规则型策略几乎不会出现一波做反亏完全年的情况。这是有以下几个原因的: 多…...

MySQL 元数据锁及问题排查(Metadata Locks MDL)

"元数据"是用来描述数据对象定义的&#xff0c;而元数据锁&#xff08;Metadata Lock MDL&#xff09;即是加在这些定义上。通常我们认为非锁定一致性读&#xff08;简单select&#xff09;是不加锁的&#xff0c;这个是基于表内数据层面&#xff0c;其依然会对表的元…...

JS中的函数

1、函数形参的默认值 JavaScript函数有一个特别的地方&#xff0c;无论在函数定义中声明了多少形参&#xff0c;都可以传入任意数量的参数&#xff0c;也可以在定义函数时添加针对参数数量的处理逻辑&#xff0c;当已定义的形参无对应的传入参数时&#xff0c;为其指定一个默认…...

微信小程序开发常用的布局

在微信小程序开发中&#xff0c;常用的布局主要包括以下几种&#xff1a; Flex 布局&#xff1a;Flex 布局是一种弹性盒子布局&#xff0c;通过设置容器的属性来实现灵活的布局方式。它可以在水平或垂直方向上对子元素进行对齐、排列和分布。Flex 布局非常适用于创建响应式布局…...

Effective C++ 学习笔记 条款10 令operator=返回一个reference to *this

关于赋值&#xff0c;有趣的是你可以把它们写成连锁形式&#xff1a; int x, y, z; x y z 15; // 赋值连锁形式同样有趣的是&#xff0c;赋值采用右结合律&#xff0c;所以上述连锁赋值被解析为&#xff1a; x (y (z 15));这里15先被赋值给z&#xff0c;然后其结果&…...

算法简单试题

一、选择题 01.一个算法应该是( B ). A.程序 B.问题求解步骤的描述 C.要满足五个基本特性 D.A和C 02&#xff0e;某算法的时间复杂度为O(n)&#xff0c;则表示该…...

CSS 自测题 -- 用 flex 布局绘制骰子(一、二、三【含斜三点】、四、五、六点)

一点 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>css flex布局-画骰子</title><sty…...

蓝桥集训之牛的学术圈 I

蓝桥集训之牛的学术圈 I 核心思想&#xff1a;二分 确定指数x后 判断当前c[i]是否>x(满足条件) 并记录次数同时记录 1后满足条件的个数最后取bns和m的最小值 为满足条件的元素个数ansbns为当前指数x下 满足条件的元素个数 #include <iostream>#include <cstring…...

软件设计师软考题目解析21 --每日五题

想说的话&#xff1a;要准备软考了。0.0&#xff0c;其实我是不想考的&#xff0c;但是吧&#xff0c;由于本人已经学完所有知识了&#xff0c;只是被学校的课程给锁在那里了&#xff0c;不然早找工作去了。寻思着反正也无聊&#xff0c;就考个证玩玩。 本人github地址&#xf…...

python读写json文件详解

在Python中&#xff0c;可以使用json模块来读写JSON格式的文件。下面是一个详细的示例&#xff0c;演示了如何读写JSON文件&#xff1a; import json# 写入JSON文件 data {"name": "John","age": 30,"city": "New York" }…...

#include<ros/ros.h>头文件报错

快捷键 ctrl shift B 调用编译&#xff0c;选择:catkin_make:build&#xff09;(要先在vscode上添加扩展&#xff1a;ros) 可以点击配置设置为默认&#xff0c;修改.vscode/tasks.json 文件 修改.vscode/tasks.json 文件&#xff0c;否则ros.h头文件会报错 内容修改为以下内…...

mybatis单表curd笔记(尚硅谷

Mybatis 11111ibatis和mybatis不同 查询文档mybatis的日志输出id赋值输入&#xff08;向sql语句传入数据单个简单类型单个实体对象多个简单类型map类型 输出数据的指定单个简单类型单个实体类型输出map类型输出list输出类型主键回显&#xff08;自增长类型主键回显&#xff08;…...

在线重定义-操作步骤

第一步&#xff1a;验证表是否能被在线重定义 验证是否能按主键重定义&#xff08;默认&#xff0c;最后一次参数可以不加&#xff09; 1 2 3 4 begin --dbms_redefinition.can_redef_table(scott,tb_cablecheck_equipment_bak); dbms_redefinition.can_redef_table(scot…...

stm32G473的flash模式是单bank还是双bank?

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

MVC 数据库

MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...

第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

leetcodeSQL解题:3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化(Gradient Normalization)​​ (2) ​判别器梯度间隙正则化(Discriminator Gradient Gap Regularization)​​ (3) ​自注意力机制(Self-Attention)​​ 3. 完整损失函数 二…...

django blank 与 null的区别

1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空 但是&#xff0c;要注意以下几点&#xff1a; Django的表单验证与null无关&#xff1a;null参数控制的是数据库层面字段是否可以为NULL&#xff0c;而blank参数控制的是Django表单验证时字…...

系统掌握PyTorch:图解张量、Autograd、DataLoader、nn.Module与实战模型

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文通过代码驱动的方式&#xff0c;系统讲解PyTorch核心概念和实战技巧&#xff0c;涵盖张量操作、自动微分、数据加载、模型构建和训练全流程&#…...