vue3编程-import.meta.glob实现动态路由(菜单)

import.meta.glob 是vite提供的批量懒加载组件的方法

本地开发环境:

const modules = import.meta.glob('../views/**/*.vue')

 

这段代码返回的modules是一个Map:

key是vue文件的相对路径,值是一个函数,将函数打印出来,如下:

() => import("/src/views/xxxxx.vue?t=1721728770051")

 本质上是一个按需加载的函数。

打包构建后: 

  vite本地构建使用的是esbuild,本地服务之所以能够识别.vue文件,是因为本地服务做了支撑。本地服务将.vue文件转换为了.js文件:

本地服务器返回了javascript代码,这个也容易实现,服务器判断如果是.vue结尾的,对源码进行编译响应为js即可。

 然而,打包构建vite使用的是rollup。生产服务器不会支持对.vue文件的处理。

打包构建后的代码,modules的key是不变的。但是值函数却变了,里面导入的是构建后的.js文件。

应用:

       在实现动态菜单的时候,需要从后端获取路由数据,然后因为涉及到按需加载:

/*** 动态导入组件* @param url* @returns*/function dynamicImport(url:string){return ()=>import(url)}/*** route的初始化处理* @params routers - ajax请求返回的结果*/async function routeInit(routers:RouteType[]){routers.forEach(route =>{if(route.component === 'ConsoleLayout'){route.component = ConsoleLayout}else{route.component = dynamicImport(route.component as string)}if(route.children && route.children.length >0 ){routeInit(route.children)}})return routers}

component需要按需加载,因此需要将route.component的值变为()=>import()的形式。然而,功能实现后才发现,构建后会存在.vue的问题。

因此,解决办法就是import.meta.glob。

const modules = import.meta.glob('../views/**/*.vue')function loadView(url: string) {return modules[`../views/${url}.vue`]
}route.component = loadView(name as string)

这样就能够实现兼容本地和打包构建后的动态菜单的功能,而原理就是上面分析的。

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

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

相关文章

Github个人网站搭建详细教程【Github+Jekyll模板】

文章目录 前言一、介绍1 Github Pages是什么2 静态网站生成工具3 Jekyll简介Jekyll 和 GitHub 的关系 4 Mac系统Jekyll的安装及使用安装Jekyll的简单使用 二、快速搭建第一个Github Pages网站三、静态网站模板——Chirpy1 个人定制 四、WordPress迁移到Github参考资料 前言 23…

智能电表怎么算电费的?

智能电表作为现代电力管理系统的核心组成部分,通过先进的计量技术和通信手段实现了电费计算的自动化与精准化。本文将详细介绍智能电表的工作原理以及如何基于这些数据计算电费。 一、智能电表的工作原理 -数据采集:智能电表内置传感器持续监测电流、电…

3DMAX科研绘图那些你不得不知道的插件

在3DMAX科研绘图中,有几个插件是不得不提的高效工具,它们能够显著提升科研绘图的效率和质量。以下是一些值得关注的插件: 1. DNAChain(一键生成DNA链) 功能描述:该插件允许用户沿着线条路径一键生成DNA链…

[Meachines] Lame smbd3.0-RCE

信息收集 IP AddressOpening Ports10.10.10.3TCP:21,22,139,445,3632 $ nmap -p- 10.10.10.3 --min-rate 1000 -sC -sV 21/tcp open ftp vsftpd 2.3.4 |_ftp-anon: Anonymous FTP login allowed (FTP code 230) | ftp-syst: | STAT: | FTP server status: | …

理解 HTTP 请求中 Query 和 Body 的异同

本文将深入探讨HTTP请求中的两个关键要素:查询参数(Query)和请求体(Body)。我们将阐明它们之间的差异,并讨论在何种情况下使用每一种。 HTTP 请求概述 HTTP 请求是客户端(如浏览器&#xff09…

13 用户兴趣探索与开发 深度学习与强化学习

AI 技术在智能语音、图像识别、自然语言理解等领域,AI 都有大范围的落地。而应用得最早、最广泛的,还是 AI 在推荐领域的实践。 目前大部分主流 App 都集成了推荐系统,比如 58 同城 App 中推荐系统就不断通过对用户的兴趣的探索和开发&#…

计算机网络(Wrong Question)

一、计算机网络体系结构 1.1 计算机网络概述 D 注:计算机的三大主要功能是数据通信、资源共享、分布式处理。(负载均衡、提高可靠性) 注:几段链路就是几段流水。 C 注:记住一个基本计算公式:若n个分组&a…

Linux进程间通信(管道+共享内存)

进程间通信(interprocess communication,简称 IPC)指两个进程之间的通信。系统中的每一个进程都有各自的地址空间,并且相互独立、隔离,每个进程都处于自己的地址空间中。所以同一个进程的不同模块(譬如不同…

matlab仿真 数字信号载波传输(下)

(内容源自详解MATLAB/SIMULINK 通信系统建模与仿真 刘学勇编著第七 章内容,有兴趣的读者请阅读原书) clear all M8; msg[1 4 3 0 7 5 2 6]; ts0.01; T1; %t0:ts:T; t0:ts:T-ts; %x0:ts:length(msg); x0:ts:length(msg)-ts; f…

《python语言程序设计》第6章10题使用isPrime函数 求小于10000的素数的个数

修改了一个地方&#xff0c;真的太棒了&#xff01; def isPrime(number):divisor 2while divisor < number / 2:if number % divisor 0:return Falsedivisor 1return Truedef printPrimeNumbers(numberOfPrimes):# 这个代码之前就没有用&#xff0c;作者写的目的是什么呢…

NC 最长回文子串

系列文章目录 文章目录 系列文章目录前言 前言 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站&#xff0c;这篇文章男女通用&#xff0c;看懂了就去分享给你的码吧。 描述 对于长度为n的…

6. 开发板烧录

1. 概述 采用恒玄的底板+2小板的开发板 2. 开发板资料 详见:<<BES AUDIO DEV BOARD USER MANUUAL_9v5.pdf>> 3. 硬件接线 供电:可以采用电池供电,也可以采用Type-c供电 烧录:采用Type-C口,实际上就是串口。(下图带黑色标志的)

【启明智显分享】基于国产Model3芯片的7寸触摸屏助力智慧医疗,电子床头屏提升护理交互

未来医院必然是以信息化为基础&#xff0c;以物联网为特征&#xff0c;以医疗为核心的服务型医院。病房作为医院的重要服务场所&#xff0c;成为智慧医院建设的重要一环。 为提高医护人员与患者的互动交流&#xff0c;给医疗注入智慧元素&#xff0c;让患者享受智能服务&#…

AJAX-Promise 详解

(创作不易&#xff0c;感谢有你&#xff0c;你的支持&#xff0c;就是我前行的最大动力&#xff0c;如果看完对你有帮助&#xff0c;请留下您的足迹&#xff09; 目录 前言 一、Promise基本概念 1.1 定义 1.2 状态 1.3 构造函数 二、Promise基本用法 2.1 then() 2.2 ca…

keras的路透社数据训练对测试数据的概率总和计算问题

在使用keras内置数据路透社新闻分类的时候&#xff0c;使用训练的模型预测测试数据。然后发现对预测数据分类的概率总和不是1. pridiction model.predict(x_test)for i in range(0,46):print(np.sum(pridiction[i]))然而python深度学习这本书里面的是1.0 问题目前没有解决。…

醒醒,别睡了...讲《数据分析pandas库》了—/—<3>

直接上知识点 一、 1、新建数据框时建立索引 所有的数据框默认都已经使用从 0 开始的自然数索引&#xff0c;因此这里的"建立”索引指的是自定 df pd.DataFrame( {varl : 1.0, var2 :[1,2,3,4], var3 :[test,python,test,hello] , var4 : cons} , index [0,1,2,3]) …

量化私募公司的多因子构建方案(附python代码)

原创文章第600篇&#xff0c;专注“AI量化投资、世界运行的规律、个人成长与财富自由"。 昨天代码已经发布了&#xff0c;大家可以前往下载和更新&#xff1a; 代码发布&#xff1a;quantlabv5.3&#xff0c;可转债所有数据及双低、动量因子策略&#xff0c;单因子分析框…

文件夹怎么设置密码?文件夹加密方法盘点

文件夹是电脑管理数据的重要工具&#xff0c;当我们将重要数据存储在文件夹中时&#xff0c;需要严格保护文件夹的数据安全&#xff0c;避免数据泄露。下面我们就来了解一下文件夹设置密码的方法。 文件夹加密 文件夹加密是指通过加密算法来加密保护文件夹&#xff0c;避免其他…

高级网页爬虫开发:Scrapy和BeautifulSoup的深度整合

引言 在互联网时代&#xff0c;数据的价值日益凸显。网页爬虫作为一种自动化获取网页内容的工具&#xff0c;广泛应用于数据挖掘、市场分析、内容聚合等领域。Scrapy是一个强大的网页爬虫框架&#xff0c;而BeautifulSoup则是一个灵活的HTML和XML文档解析库。本文将探讨如何将…

Kolla-Ansible的确是不支持CentOS-Stream系列产品了

看着OpenStack最新的 C 版本出来一段时间了&#xff0c;想尝个鲜、用Kolla-Ansible进行容器化部署&#xff0c;结果嘛。。。 根据实验结果&#xff0c;自OpenStack Bobcat版本开始&#xff0c;Kolla-Ansible就适合在CentOS系列产品上部署了&#xff0c;通过对 Bobcat和Caracal…