当前位置: 首页 > 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…...

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

关于 WASM:1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么&#xff1f; WebAssembly&#xff08;WASM&#xff09; 是一种能在现代浏览器中高效运行的二进制指令格式&#xff0c;它不是传统的编程语言&#xff0c;而是一种 低级字节码格式&#xff0c;可由高级语言&#xff08;如 C、C、Rust&am…...

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

#Uniapp篇:chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

三分算法与DeepSeek辅助证明是单峰函数

前置 单峰函数有唯一的最大值&#xff0c;最大值左侧的数值严格单调递增&#xff0c;最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值&#xff0c;最小值左侧的数值严格单调递减&#xff0c;最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...

Unity UGUI Button事件流程

场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...

论文阅读:Matting by Generation

今天介绍一篇关于 matting 抠图的文章&#xff0c;抠图也算是计算机视觉里面非常经典的一个任务了。从早期的经典算法到如今的深度学习算法&#xff0c;已经有很多的工作和这个任务相关。这两年 diffusion 模型很火&#xff0c;大家又开始用 diffusion 模型做各种 CV 任务了&am…...

密码学基础——SM4算法

博客主页&#xff1a;christine-rr-CSDN博客 ​​​​专栏主页&#xff1a;密码学 &#x1f4cc; 【今日更新】&#x1f4cc; 对称密码算法——SM4 目录 一、国密SM系列算法概述 二、SM4算法 2.1算法背景 2.2算法特点 2.3 基本部件 2.3.1 S盒 2.3.2 非线性变换 ​编辑…...

【实施指南】Android客户端HTTPS双向认证实施指南

&#x1f510; 一、所需准备材料 证书文件&#xff08;6类核心文件&#xff09; 类型 格式 作用 Android端要求 CA根证书 .crt/.pem 验证服务器/客户端证书合法性 需预置到Android信任库 服务器证书 .crt 服务器身份证明 客户端需持有以验证服务器 客户端证书 .crt 客户端身份…...