router 动态路由与懒加载
路由的使用
静态路由
静态路由: 引入组件然后挂载到router的component下,这样在页面刷新时,就会直接请求引入, 当项目越来越大时,
初始化的时间就会越来越长,因为它要将所有的页面全部引入后才会去渲染页面. 不管你当前页面有没有用到, 初始化是加载的是项目中所有组件,以及ts文件
import User from './User.vue'const routes = [{ path: '/users', component: User },]
静态路由 + 懒加载
由于项目变得很大,在浏览器加载时,就会将所有的组件引入进来,导致页面初始化渲染变得越来越慢,
官网提供了懒加载的形式引入组件()=> import('') 这样,在页面刷新时,不会直接引入,当某个菜单触发式, 它才会引入对应的组件.以及组件内部用到的相关的文件
const routes = [{ path: '/users', component: ()=> import('@/views/User.vue')},]
动态路由 + 懒加载
菜单的实现分为两种,一种是直接在前端代码写死(静态菜单),另一种是配置在数据库中(动态菜单).
因为组件名称我们不能提前知道,只有在请求到菜单数据时,程序才能得知具体挂载哪个组件.
当然如果直接用懒加载的方法component: ()=> import(/src/${item}.vue) 在访问菜单时,router会报找不到对应的组件.
解决方法
推荐一种import.meta.glob 的形式, 当使用modules[/src/${item.componentPath }.vue] 获取某个组件实例时.
它返回的结果便是()=>import('xxxx/xxx.vue') 正是router 懒加载所需要的格式. 将它直接赋值给router的component属性即可
完整代码
const menuList = [...], // 后端提供的路由信息// 引用所有的vue组件const modules = import.meta.glob('@/views/**/**.vue');const addServerMenuRouter = (router,menuList, modules)=>{for(const item of menuList) {if(item.componentPath === 'RouteView') {// 此处是菜单父节点,无需任何操作} else {// 此处是叶子节点, 添加routerrouter.addRoute('index', { path: item.path,name: item.name,meta: item.meta,component: modules[`/src/${item.componentPath }.vue`]})}}if(item.children && item.children.length >0) {addServerMenuRouter(router, modules, item.children)}}相关文章：
router 动态路由与懒加载
路由的使用 静态路由 静态路由: 引入组件然后挂载到router的component下,这样在页面刷新时,就会直接请求引入, 当项目越来越大时, 初始化的时间就会越来越长,因为它要将所有的页面全部引入后才会去渲染页面. 不管你当前页面有没有用到, 初始化是加载的是项目中所有组件,以及t…...
网络安全 | 信息安全管理体系（ISMS）认证与实施
网络安全 | 信息安全管理体系（ISMS）认证与实施 一、前言二、信息安全管理体系（ISMS）概述2.1 ISMS 的定义与内涵2.2 ISMS 的核心标准 ——ISO/IEC 27001 三、信息安全管理体系（ISMS）认证3.1 认证的意义与价值…...
【机器学习:一、机器学习简介】
机器学习是当前人工智能领域的重要分支，其目标是通过算法从数据中提取模式和知识，并进行预测或决策。以下从 机器学习概述、有监督学习 和 无监督学习 三个方面进行介绍。 机器学习概述 机器学习定义 机器学习（Machine Learning࿰…...
DjangoORM字段参数、常用字段类型及参数、模型和表单验证器详解
由于项目原因必须使用DjangoORM模型，所以今天整理了一下关于DjangoORM模型里的详细内容。包含字段参数、常用字段类型及参数、模型和表单验证器。 一、通用字段参数 这些参数可以应用于多种字段类型： （1）null：如果为 …...
【pyqt】（四）Designer布局
布局 之前我们利用鼠标拖动的控件的时候，发现一些部件很难完成对齐这些工作，pyqt为我们提供的多种布局功能不仅可以让排版更加美观，还能够让界面自适应窗口大小的变化，使得布局美观合理。最常使用的三种布局就是垂直河子布局、水…...
每日一学——自动化工具（Jenkins）
3.2 Jenkins 3.2.1 CI/CD流程设计 嘿，小伙伴们！今天我们来聊聊Jenkins——这个在持续集成（CI）和持续部署（CD）领域里大名鼎鼎的工具。Jenkins不仅可以帮我们自动化构建和测试代码，还能自动部署…...
—Kubernetes-Pod)
k8s基础(1)—Kubernetes-Pod
一、Pod简介 Pod是Kubernetes（k8s）系统中可以创建和管理的最小单元，是资源对象模型中由用户创建或部署的最小资源对象模型。Pod是由一个或多个容器组成的，这些容器共享存储和网络资源，可以看作是一个逻辑的主机。…...
《Java核心技术 卷II》流的创建
流的创建 Collection接口中stream方法可以将任何集合转换为一个流。 用静态Stream.of转化成数组。 Stream words Stream.of(contents.split("\\PL")); of方法具有可变长参数，可以构建具有任意数量的流。 使用Array.stream(array,from,to)可以用数组…...
单片机实物成品-010 智能宠物喂食系统（代码+硬件+论文）
项目介绍 版本1：oled显示定时投喂（舵机模拟）声光报警显示实时时间 ---演示视频： 智能宠物喂食001_哔哩哔哩_bilibili 1. STM32F103C8T6 单片机进行数据处理 2. OLED 液晶显示 3，按键1 在数据显示界面时按下按键1切…...
我用AI学Android Jetpack Compose之开篇
打算写一个系列，我用AI学Android Jetpack Compose，本教程需要有一定Android开发基础的同学，至少能运行成功Hello World！会基本的Java或Kotlin语法，如果不会，先去学习基本的Android应用开发，推荐…...
算法题（24）：只出现一次的数字（二）
审题： 数组中除了答案元素只出现一次外，其他元素都会出现三次，我们需要找到并返回答案元素 思路： 由于现在会出现三次，所以利用异或运算符的方法就会失效。而所有数据都在32位二进制范围内，所以我们采用依次…...
计算机网络 （15）宽带接入技术
前言 计算机网络宽带接入技术是指通过高速、大容量的通信信道或网络，实现用户与互联网或其他通信网络之间的高速连接。 一、宽带接入技术的定义与特点 定义：宽带接入技术是指能够传输大量数据的通信信道或网络，其传输速度通常较高，…...
什么是索引
在数据库管理系统中，索引是一种数据结构，用于快速定位数据库表中的特定记录。索引类似于一本书的目录，可以帮助数据库引擎迅速找到所需的数据，而不必扫描整个表。 类型：常见的数据库索引类型包括B树索引、哈希索引、全…...
【数据结构】树链刨分
1 u v k，修改路径上节点权值，将节点 uu 和节点 vv 之间路径上的所有节点（包括这两个节点）的权值增加 kk。2 u k，修改子树上节点权值，将以节点 uu 为根的子树上的所有节点的权值增加 kk。3 u v，询…...
perl包安装的CPAN大坑
先看一个用cpan安装的例子。 $cpan -i App::cpanminus Loading internal logger. Log::Log4perl recommended for better logging Reading /home/wubin/.cpan/MetadataDatabase was generated on Tue, 24 Dec 2024 15:29:01 GMT Running install for module App::cpanminusTry…...
打造三甲医院人工智能矩阵新引擎（四）：医疗趋势预测大模型篇 EpiForecast与DeepHealthNet合成应用
一、引言 1.1 研究背景与意义 在当今数字化时代，医疗领域积累了海量的数据，涵盖电子病历、医学影像、基因序列、临床检验结果等多源异构信息。这些数据蕴含着疾病发生发展、治疗反应、疫情传播等规律，为医疗趋势预测提供了数据基础。准确的医疗趋势预测能辅助医疗机构提前…...
RSA e与phi不互质（AMM算法进行有限域开根）
e与phi不互质 这一部分学习来自trup师傅的博客 针对CTFer的e与phi不互素的问题 - 跳跳糖 1：m^t<n from Crypto.Util.number import * from secret import flag flag bflag{*********} m bytes_to_long(flag) p getPrime(1024) q getPrime(1024) n p * q …...
021-spring-springmvc-组件
SpringMVC的handMapping 比较重要的部分 比较重要的部分 比较重要的部分 关于组件的部分 这里以 RequestMappingHandlerMapping 为例子 默认的3个组件是： org.springframework.web.servlet.handler.BeanNameUrlHandlerMapping org.springframework.web.servlet.mvc…...
【Leecode】Leecode刷题之路第99天之恢复二叉搜索树
题目出处 99-恢复二叉搜索树-题目出处 题目描述 个人解法 思路： todo代码示例：（Java） todo复杂度分析 todo官方解法 99-恢复二叉搜索树-官方解法 方法1：显式中序遍历 思路： 代码示例：&…...
【从零开始入门unity游戏开发之——C#篇41】C#迭代器（Iterator）——自定义类实现 foreach 操作
文章目录 前言一、什么是迭代器？二、标准迭代器的实现方法1、自定义一个类CustomList2、让CustomList继承IEnumerable接口3、再继承IEnumerator接口4、完善迭代器功能5、**foreach遍历的本质**：6、在Reset方法里把光标复原 三、用yield return语法糖实现…...
运算符重载 - 自定义运算符行为
引言 C 是一种支持面向对象编程（OOP）的编程语言，它允许程序员通过运算符重载来自定义类的行为。运算符重载使得我们可以为自定义类型定义与内置类型相似的操作方式，从而使代码更加直观和易读。 本文将详细介绍 C 中的运算符重载…...
RabbitMQ-基本使用
RabbitMQ: One broker to queue them all | RabbitMQ 官方 安装到Docker中 docker run \-e RABBITMQ_DEFAULT_USERrabbit \-e RABBITMQ_DEFAULT_PASSrabbit \-v mq-plugins:/plugins \--name mq \--hostname mq \-p 15672:15672 \-p 5672:5672 \--network mynet\-d \rabbitmq:3…...
sklearn基础教程
sklearn，全称为Scikit-learn，是一个基于Python的开源机器学习库，广泛用于数据挖掘和数据分析。它建立在NumPy、SciPy和matplotlib这些科学计算库之上，提供了简单而高效的工具来解决各种机器学习问题。 安装 首先，确保…...
173. 矩阵距离 acwing -多路BFS
原题链接：173. 矩阵距离 - AcWing题库 给定一个 N行 M 列的 01矩阵 A，A[i][j] 与 A[k][l]]之间的曼哈顿距离定义为： dist(i,j,k,l)|i−k||j−l|| 输出一个 N 行 M 列的整数矩阵 B，其中： B[i][j]min1≤x≤N,1≤y≤M,A…...
【MySQL】--- 内置函数
Welcome to 9ilks Code World (๑•́ ₃ •̀๑) 个人主页: 9ilk (๑•́ ₃ •̀๑) 文章专栏： MySQL 🏠 时间函数 约定：我们在MySQL中说的日期指的是年 月 日，时间指的是时 分 秒。 🧷 now() select n…...
更改element-plus的table样式
表头样式： <el-table :data"props.tableData" style"width: 100%" :header-cell-style"headerCellStyle" :cell-style"cellStyle"> </el-table>样式： // 表头样式 const headerCellStyle {backgro…...
25.Java JUC 引入（进程与线程、线程的状态、并发与并行、管程、用户线程与守护线程）
一、JUC 简介 JUC 是 java.util.concurrent 工具包的简称，这是一个处理线程的工具包，从 JDK1.5 开始出现 二、进程与线程 1、基本介绍 （1）进程 进程是计算机中的程序关于某数据集合上的一次运行活动，是系统进行资源…...
双目视觉：reprojectImageTo3D函数
前言 reprojectImageTo3D 是 OpenCV 中用于从视差图生成三维点云的函数。它的原理是利用视差图和相机的校准参数，通过三角测量法，计算每个像素对应的三维坐标。以下内容根据源码分析所写，觉得可以的话，点赞收藏哈！&am…...
深度解析 Kubernetes Service 负载均衡器及其在 Cube Studio 推理服务中的优化选择
目录 一、Kubernetes Service 负载均衡器概述 Service 的核心功能： 二、Kubernetes Service 类型及适用场景 1. ClusterIP（默认类型） 2. NodePort 3. LoadBalancer 4. ExternalName 5. Ingress（增强型 Service）…...
NLP 中文拼写检测纠正论文-07-NLPTEA-2020中文语法错误诊断共享任务概述
拼写纠正系列 NLP 中文拼写检测实现思路 NLP 中文拼写检测纠正算法整理 NLP 英文拼写算法，如果提升 100W 倍的性能？ NLP 中文拼写检测纠正 Paper java 实现中英文拼写检查和错误纠正？可我只会写 CRUD 啊！ 一个提升英文单词拼…...
快速上手LangChain（三）构建检索增强生成（RAG）应用
文章目录 快速上手LangChain（三）构建检索增强生成（RAG）应用概述索引阿里嵌入模型 Embedding检索和生成RAG应用（demo：根据我的博客主页，分析一下我的技术栈）快速上手LangChain（三）构建检索增强生成（RAG）应用 langchain官方文档：https://python.langchain.ac.cn/do…...
深度学习中的离群值
文章目录 深度学习中有离群值吗？深度学习中的离群值来源：处理离群值的策略：1. 数据预处理阶段：2. 数据增强和鲁棒模型：3. 模型训练阶段：4. 异常检测集成模型： 如何处理对抗样本？总结…...
汽车燃油软件标定测试
油箱测试 确定油箱的参数： 总容积，额定容积，不可用容积等。油泵测试（静态） 分为加油测试，减油测试，1L或者500ml增减； 分别测试油泵的阻值输出，类似： 油量 阻…...
#C02L02P01. C02.L02.一维数组最值问题.知识点1.求最大值
从键盘读入n（1<n<100）个正整数，输出最大值。 算法分析 假设一个最大值 maxx0 ； maxx 依次跟数组中的元素进行比较； 如果该数组元素大于 maxx ，则将该数组元素值赋值给 maxx ； maxx 即…...
pycharm如何拉取一个git项目，然后，修改后再上传到自建的项目中？
以chattts为例 https://github.com/2noise/ChatTTS.git 1.建一个虚拟环境，用于项目使用 2.pycharｍ新建工程 ３.忽略 提示 勾选，新建远程仓库 设置账号和密码 设置git路径，一般是正确的，点测试即可 &…...
【数据库初阶】MySQL中表的约束（上）
🎉博主首页： 有趣的中国人 🎉专栏首页： 数据库初阶 🎉其它专栏： C初阶 | C进阶 | 初阶数据结构 亲爱的小伙伴们，大家好！在这篇文章中，我们将深入浅出地为大家讲解 MySQL…...
smbms超市管理系统
系统测试及实现效果 完整源码已上传资源 登录界面 系统首页 订单管理页面 用户管理页面 供应商管理页面 密码修改 SQL语句分析 存储引擎：InnoDB，支持事务和外键；字符集：utf8，支持多语言字符；排序规则&am…...
Visual Studio 中增加的AI功能
前言： 人工智能的发展，在现在，编程技术的IDE里面也融合了AI的基本操做。本例，以微软的Visual Studio中的人工智能的功能介绍例子。 本例的环境： Visual Studio 17.12 1 AI 智能变量检测： 上图展示了一…...
大功率PCB设计
1.电源和电机的走线用线径较大的铺铜，讲究的是走线顺畅： 2.同一个电源属性四层板都铺铜，并打很多过孔: 3.走线顺畅，可以看到从左到右供电。从右向左接地，加电流采样： 一个问题，这样会形成电源环…...
Nginx与frp结合实现局域网和公网的双重https服务
背景： 因为局域网内架设了 tiddlywiki、 Nextcloud 等服务，同时也把公司的网站架设在了本地，为了实现局域网直接在局域网内访问，而外部访问通过frps服务器作为反向代理的目的，才有此内容。 实现的效果如下图琐事 不喜欢…...
改投论文时如何重构
摘要: 不同期刊和会议对于论文的风格、页数限制等方面有一些差别, 论文在某个地方被拒, 改投别处时需要进行重构. 本贴描述重构的基本方案. 你的衣柜乱糟糟的, 如何清理呢? 方案 A. 把不喜欢的衣服一件件丢掉.方案 B. 把衣服全部丢出来, 然后再把喜欢的衣服一件件放进去. 对…...
)
【YOLOv5】源码(common.py)
该文件位于/models/common.py，提供了构建YOLOv5模型的各种基础模块，其中包含了常用的功能模块，如自动填充autopad函数、标准卷积层Conv、瓶颈层Bottleneck、C3、SPPF、Concat层等 参考笔记：【YOLOv3】 源码（common.py…...
python中的赋值方法
python赋值方法有很多，主要可以分为链式赋值、系列解包赋值、常量形式赋值，下面介绍下三者间区别： 1、链式赋值： 链式赋值用于同一个对象赋值给多个变量 xy123 可以认为是 x 123 y 123 2、系列解包赋值： 系列数据…...
pyhton 掩码 筛选显示
目录 bitwise_and控制： 点乘： 性能对比： bitwise_and控制： import cv2# 读取彩色图和mask二值图 color_img cv2.imread(color_image.jpg) mask cv2.imread(mask.jpg, 0) # 以灰度模式读取二值图# 确保彩色图和mask的尺寸一…...
测试覆盖率
1、概念 覆盖率测试，也称为测试覆盖率分析，是软件测试中的一个重要概念，用来衡量测试用例执行时对代码的覆盖程度。它提供了一种量化的方法来评估测试集的充分性，即测试是否足够广泛地触及了应用程序的所有部分。覆盖率测试可以应…...
clickhouse query_log 常用查询语句
1、查询一段时间耗时超过3秒的语句。 SELECT* FROMsystem.query_log WHEREquery_duration_ms > 30000AND event_time > 2024-12-31 15:50:00 AND event_time < 2024-12-31 17:50:00 ORDER BYevent_time desc;2、查询一段时间报错的语句 SELECT* FROMsystem.query_lo…...
uni-app 资源引用（绝对路径和相对路径）方法汇总
文章目录 一、前言🍃二、绝对路径和相对路径2.1 绝对路径2.2 相对路径 三、引用组件四、引用js4.1 js 文件引入4.2 NPM支持 五、引用css六、引用json6.1 json文件引入 七、引用静态资源7.1 模板内引入静态资源7.2 css 引入静态资源7.3 js/uts 引入静态资源7.4 静态资…...
Java SpringBoot使用EasyExcel导入导出Excel文件
点击下载《Java SpringBoot使用EasyExcel导入导出Excel文件(源代码)》 在 Java Spring Boot 项目中，导入（读取）和导出（写入） Excel 文件是一项常见的需求。EasyExcel 是阿里巴巴开源的一个用于简化 Java 环境下 Excel…...
CDN SSLTLS以及安全
随着互联网的发展，内容分发网络（CDN）在提升网站访问速度和安全性方面发挥了重要作用。然而，CDN在带来便利的同时也面临一些安全挑战。本文将探讨CDN的安全风险，并深入解析SSL/TLS加密技术及其在CDN中的应用。 CDN的安全…...
安卓11 SysteUI添加按钮以及下拉状态栏的色温调节按钮
最近客户想要做一个台灯产品，需要实现 串口调节台灯功能 ，其中包括 亮度调节 色温调节 开关 三个功能 话不多说，贴代码 diff --git a/packages/SystemUI/AndroidManifest.xml b/packages/SystemUI/AndroidManifest.xml old mode 100644 new …...