【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)
})

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

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

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

相关文章

【信息系统项目管理师】--【信息技术发展】--【新一代信息技术及应用】--【虚拟现实】

文章目录 第二章 信息技术发展2.2 新一代信息技术及应用2.2.6 虚拟现实1.技术基础2.关键技术3.应用和发展 第二章 信息技术发展 信息技术是在信息科学的基本原理和方法下,获取信息、处理信息、传输信息和使用信息的应用技术总称。从信息技术的发展过程来看&#xff…

封关了,不仅封掉了港漂们方便的回家之路

封关不仅堵住了港漂回国的便捷途径,也堵住了港漂修理内地大大小小的电器的路。 香港当然有维修工。 听邻居说修一个漏水的水龙头要港币1000元,检查微波炉要港币600元。 更换主板需要4000元,比新机还贵。 收回坏掉的洗衣机修理费是14000元&am…

专家解读:2024年十大项目管理工具综合排名与评价

2024年涌现出一批新的项目管理工具,各具特色的功能和设计为企业解决了诸多的管理难题。今天我们就来盘点2024年的十款项目管理工具Zoho Projects、AgileMaster、PlanItAll、CommuniQ、WorkFlowRanger、GanttGenius、RiskAssessor、TeamHarmony、BudgetBoss、CloudCo…

Qt6.6搭建WebAssembly

1.首先安装python , 链接:https://www.python.org/ 2.下载并安装qt6. 3.克隆emsdk工程 3.1 进入emsdk目录,然后更新emsdk代码 3.2 下载并安装最新的SDK工具。(C:\Qt\emsdk>emsdk install --global latest) 3.3…

【C++】C/C++内存管理详解

个人主页 : zxctscl 文章封面来自:艺术家–贤海林 如有转载请先通知 目录 1. 前言2. C/C内存分布3. C语言中动态内存管理方式4. C中动态内存管理4.1 new/delete操作内置类型4.2 new和delete操作自定义类型 5. operator new与operator delete函数5.1 oper…

算法沉淀——动态规划之其它背包问题与卡特兰数(leetcode真题剖析)

算法沉淀——动态规划之其它背包问题与卡特兰数 二维费用的背包问题01.一和零02.盈利计划 似包非包组合总和 Ⅳ 卡特兰数不同的二叉搜索树 二维费用的背包问题 01.一和零 题目链接:https://leetcode.cn/problems/ones-and-zeroes/ 给你一个二进制字符串数组 strs…

大语言模型LLM学习梳理

一、介绍 今天问了下晓宇关于LLM的知识,学到了很多,总结下。 二、开源的大型语言模型(LLM)包含哪些东西? 模型包含两块内容: 框架。 框架就是函数和代码逻辑的组合。 可能有多层,每层可能有很…

【网络】主机连接 TCP 三次握手

【网络】主机连接 TCP 三次握手 一、TCP连接3次握手二、TCP连接4次挥手三、为什么tcp要三次握手,两次行不四、为什么TCP挥手需要4次五、Netstat命令的连接状态包括:六、练习题 一、TCP连接3次握手 1、建立连接的时候是3次握手,客户端向服务器端发送SYN&…

数据结构界的终极幻神----树

目录 一.数的概念和分类 种类 二.重点概念 哈希树: 二叉树的线索化 什么是线索化 为什么要线索化 特殊的查找树 完全二叉树 三.手撕完全二叉树(堆) 重点讲解 向上搜索算法 向下搜索算法 一.数的概念和分类 树(tree)是包含 n(n≥0) [2] 个节…

Shopee 虾皮运营六大核心技巧,下一个大卖就是你

对于新手卖家来说,店铺运营是头等大事。运营得当就能获取相应的收益,那么Shopee 虾皮运营的核心技巧是什么呢?今天给大家分享6⃣大核心技巧,学会了下个大卖就是你。 Shopee 虾皮运营六大核心技巧 1️⃣ 分时段上新 📌…

3Dmax中VR渲染太阳光渲染参数怎么设置?渲染100云渲染助力

我们用3Dmax建模时一些场景会用到太阳光,那么渲染参数是如何设置的呢? 我们一起来看看,直接上图 以上就是详细的参数设置,大家可以用做参考,如果本地渲染慢的朋友可以考虑使用云渲染100 机器多,渲染稳定不…

android 快速实现 垂直SeekBar(VerticalSeekBar)

1.话不多说上源码: package com.example.widget;import android.content.Context; import android.graphics.Canvas; import android.util.AttributeSet; import android.view.MotionEvent;/*** Class to create a vertical slider*/ public class VerticalSeekBar…

redis进阶以及springboot连接使用redis

redis进阶--Geospatial 地理位置的缩写,可以表示一个区域的二维坐标,redis提供了经纬度设置,查询,范围查询,距离查询,经纬度hash等操作。 使用场景 在地图中可以用来计算距离我们最近的门店。 redis进阶…

基于51单片机的公交ic卡系统设计

目 录 摘 要 I Abstract II 引 言 1 1 总体方案设计 3 1.1 方案选择 3 1.2 硬件选择 3 1.3 系统工作原理 4 1.4 总体方案确定 5 2 系统硬件电路设计 6 2.1 主控模块电路设计 6 2.2 电源电路设计 8 2.3 显示电路模块设计 8 2.4 报警模块电路设计 10 2.5 RC522刷卡模块 10 2.6 独…

下属OKR与上级OKR对齐时,有几种方法?

下属的OKR(Objectives and Key Results,即目标与关键成果)与上级的OKR对齐,是确保组织目标一致性和团队协同工作的关键步骤。以下是几种常用的对齐方法: 直接映射法:下属的OKR直接反映并支撑上级的OKR。例如…

【二】【SQL Server】如何运用SQL Server中查询设计器通关数据库期末查询大题

教学管理系统201703153 教学管理系统数据库展示 成绩表展示 课程表展示 学生表展示 院系表展示 一、基本操作 设置复合主键 设置其他表的主键 设置字段取值范围 二、简单操作 第一题 第二题 第三题 第四题 结尾 最后,感谢您阅读我的文章,希望这些内容能…

(黑马出品_04)SpringCloud+RabbitMQ+Docker+Redis+搜索+分布式

(黑马出品_04)SpringCloudRabbitMQDockerRedis搜索分布式 微服务技术异步通信 今日目标1.初识MQ1.1.同步和异步通讯1.1.1.同步通讯1.1.2.异步通讯 1.2.技术对比 2.快速入门2.1.安装RabbitMQ2.1.1.单机部署(1).下载镜像方式…

SICP解读指南:深度阅读 “计算机领域三巨头” 之一(文末送书)

🌈个人主页:聆风吟_ 🔥系列专栏:Linux实践室、网络奇遇记 🔖少年有梦不应止于心动,更要付诸行动。 文章目录 📋前言一. 书籍介绍1.1 SICP侧重点1.2 SICP章节介绍 二. 书籍推荐2.1 书籍介绍2.2 推…

[HackMyVM]靶场 Wild

kali:192.168.56.104 主机发现 arp-scan -l # arp-scan -l Interface: eth0, type: EN10MB, MAC: 00:0c:29:d2:e0:49, IPv4: 192.168.56.104 Starting arp-scan 1.10.0 with 256 hosts (https://github.com/royhills/arp-scan) 192.168.56.1 0a:00:27:00:00:05 …

Win11黑屏只有鼠标该怎么处理?

作者:Buzhiming User 链接:https://www.zhihu.com/question/472508581/answer/2275715047 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 方法1.手动启用explorer:CTRLshiftesc打开…