前端基础vue路由懒加载
为什么用路由懒加载
首屏组件加载速度更快一些,解决白屏问题,常言道需要就加载,不需要就先放一边
懒加载定义
懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载。
使用
常用的懒加载方式有两种:即使用vue异步组件 和 ES中的import(及require.ensure)
1、未用懒加载,vue中路由代码如下
import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'Vue.use(Router)export default new Router({mode:'hash'routes: [{path: '/',name: 'HelloWorld',component:HelloWorld}]
})
备注:mode是传参模式,用hash有#,# 就是 hash符号,中文名为哈希符或者锚点,在 hash 符号后的值称为 hash 值。另外有一个history是没有的
路由的 hash 模式是利用了 window 可以监听 onhashchange 事件来实现的,也就是说 hash 值是用来指导浏览器动作的,对服务器没有影响,HTTP 请求中也不会包括 hash 值,同时每一次改变 hash 值,都会在浏览器的访问历史中增加一个记录,使用“后退”按钮,就可以回到上一个位置。所以,hash 模式 是根据 hash 值来发生改变,根据不同的值,渲染指定DOM位置的不同数据。
2、vue异步组件实现懒加载
方法如下:component:resolve=>(require(['需要加载的路由的地址']),resolve)
import Vue from 'vue'
import Router from 'vue-router'/* 此处省去之前导入的HelloWorld模块 */
Vue.use(Router)export default new Router({routes: [{path: '/',name: 'HelloWorld',component: resolve=>(require(["@/components/HelloWorld"],resolve))}]
})
3、ES 提出的import方法,(最常用,官网建议)
方法如下:const HelloWorld = ()=>import('需要加载的模块地址')
(不加 { } ,表示直接return)
import Vue from 'vue'
import Router from 'vue-router'Vue.use(Router)const HelloWorld = ()=>import("@/components/HelloWorld")
export default new Router({routes: [{path: '/',name: 'HelloWorld',component:HelloWorld}]
})
延申:组件懒加载(与路由懒加载相同)
1、原来组件中写法
<template><div class="hello"><One-com></One-com>1111</div>
</template><script>
import One from './one'
export default {components:{"One-com":One},data () {return {msg: 'Welcome to Your Vue.js App'}}
}
</script>
2、import方法
<template><div class="hello"><One-com></One-com>1111</div>
</template><script>
const One = ()=>import("./one");
export default {components:{"One-com":One},data () {return {msg: 'Welcome to Your Vue.js App'}}
}
</script>
3、异步方法
<template><div class="hello"><One-com></One-com>1111</div>
</template><script>
export default {components:{"One-com":resolve=>require(['./one'],resolve)},data () {return {msg: 'Welcome to Your Vue.js App'}}
}
</script>
总结
路由和组件的常用两种懒加载方式:
1、vue异步组件实现路由懒加载
component:resolve => require(['需要加载的路由的地址'], resolve)
require('name'):是同步加载模块的形式;require(['name1', 'name2']):是异步加载模块的形式;
2、es提出的import(推荐使用这种方式)
const HelloWorld = ()=>import('需要加载的模块地址')
import函数支持动态加载模块,返回一个 Promise 对象。
相关文章:
前端基础vue路由懒加载
为什么用路由懒加载 首屏组件加载速度更快一些,解决白屏问题,常言道需要就加载,不需要就先放一边 懒加载定义 懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载。 使用 常用的懒加载方式有两种:即…...
C++系列第九篇 数据类型下篇 - 复合类型(指针高级应用)
系列文章 C 系列 前篇 为什么学习C 及学习计划-CSDN博客 C 系列 第一篇 开发环境搭建(WSL 方向)-CSDN博客 C 系列 第二篇 你真的了解C吗?本篇带你走进C的世界-CSDN博客 C 系列 第三篇 C程序的基本结构-CSDN博客 C 系列 第四篇 C 数据类型…...
python三大开发框架django、 flask 和 fastapi 对比
本文讲述了什么启发了 FastAPI 的诞生,它与其他替代框架的对比,以及从中汲取的经验。 如果不是基于前人的成果,FastAPI 将不会存在。在 FastAPI 之前,前人已经创建了许多工具 。 几年来,我一直在避免创建新框架。首先&…...
html基础2
视频video <video src"视频的路径"controls"控制播放、暂停、音量等"autoplay"自动播放"loop"循环播放"width"视频播放器的宽度"height"视频播放器的高度"> </video>还有做浏览器兼容的方式…...
基于博弈树的开源五子棋AI教程[5 启发式搜索]
文章目录 1 最大化攻击者/最小化防守者排序2 置换表启发3 杀手表启发4 历史表启发历史表以及杀手表的维护初始化追加杀手表项清空杀手表 启发式搜索的姿势千奇百怪,本文只讨论一下几种 //搜索空间 #define Search_Space_MVA 0 //最优价值攻击者[分数最大] #d…...
JavaScript原型,原型链 ? 有什么特点?
一、原型 JavaScript 常被描述为一种基于原型的语言——每个对象拥有一个原型对象 当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型,依次层层向上搜索,直到找到一个…...
Unity 问题 之 ScrollView ,LayoutGroup,ContentSizeFitter 一起使用时,动态变化时无法及时刷新更新适配界面的问题
Unity 问题 之 ScrollView ,LayoutGroup,ContentSizeFitter 一起使用时,动态变化时无法及时刷新更新适配界面的问题 目录 Unity 问题 之 ScrollView ,LayoutGroup,ContentSizeFitter 一起使用时,动态变化时无法及时刷新更新适配界面的问题 一、简单介绍…...
linux 中 C++的环境搭建以及测试工具的简单介绍
文章目录 makefleCMakegdb调试 与 coredumpValgrind 内存检测gtest 单元测试 makefile 介绍 安装 : sudo apt install make makefile 的规则: 举例说明 包括:目标文件 、 依赖文件 、 生成规则 使用 : make make clean CMake : CMake是一个…...
448. 找到所有数组中消失的数字
找到所有数组中消失的数字 描述 : 给你一个含 n 个整数的数组 nums ,其中 nums[i] 在区间 [1, n] 内。请你找出所有在 [1, n] 范围内但没有出现在 nums 中的数字,并以数组的形式返回结果。 题目 : LeetCode 448. 找到所有数组中消失的数字: 448. 找…...
为何在下雪天它“失宠”了,传统雪地靴居然不适合下雪穿
随着冬至的到来,一年之中最寒冷的“三九天”正式拉开序幕。近期各地纷纷下起了大雪,在这场大雪中雪地靴似乎“失宠”了。在社交媒体上,有网友吐槽“雪地靴根本不能下雪穿”,后面有不少网友纷纷分享了自己在雪地靴上尴尬的经历&…...
第34节: Vue3 调用内联处理程序中的方法
在UniApp中使用Vue3框架时,你可以在模板中直接调用组件内联处理程序中的方法。以下是一个示例: <template> <view> <button click"handleClick">Click me</button> <p>{{ message }}</p> </view&…...
JavaScript--明明白白Promise (Park One)
明明白白Promise (Park One) Promise是一种用于处理异步操作的特殊对象。它代表了一个尚未完成但最终会完成的操作,并可以在操作完成后返回结果或错误。 Promise有三种状态:pending(进行中)、fulfilled(已完成&#…...
el-form与el-upload结合上传带附件的表单数据(后端篇)
1.写在之前 本文采用Spring Boot MinIO MySQLMybatis Plus技术栈,参考ruoyi-vue-pro项目。 前端实现请看本篇文章el-form与el-upload结合上传带附件的表单数据(前端篇)-CSDN博客。 2.需求描述 在OA办公系统中,流程表单申请人…...
postMessage——不同源的网页直接通过localStorage/sessionStorage/Cookies——技能提升
最近遇到一个问题,就是不同源的两个网页之间进行localstorage或者cookie的共享。 上周其实遇到过一次,觉得麻烦就让后端换了种方式处理了,昨天又遇到了同样的问题。 使用场景 比如从网页A通过iframe跳转到网页B,而且这两个网页…...
上市公司-绿色投资者数据集(2000-2022)
上市公司-绿色投资者数据(2000-2022年)是一份涵盖了过去二十多年中国上市公司绿色投资情况的详细数据集。该数据集包括了各上市公司的股票代码、年份、会计年度、股票简称,以及STPT(特殊处理股票的标识),行…...
3 pandas之dataframe
定义 DataFrame是一个二维数据结构,即数据以行和列的方式以表格形式对齐。 DataFrame特点: 存在不同类型的列大小可变带有标签的轴可对列和行进行算数运算 构造函数 pandas.DataFrame( data, index, columns, dtype, copy)参数解释: 序号…...
vue-内网,离线使用百度地图(地图瓦片图下载静态资源展示定位)
前言 最近发现很多小伙伴都在问内网怎么使用百度地图,或者是断网情况下能使用百度地图吗 后面经过一番研究,主要难点是,正常情况下我们是访问公网百度图片,数据,才能使用 内网时访问不了百度地图资源时就会使用不了&…...
OpenFeign 万字教程详解
OpenFeign 万字教程详解 目录 一、概述 1.1.OpenFeign是什么?1.2.OpenFeign能干什么1.3.OpenFeign和Feign的区别1.4.FeignClient 二、OpenFeign使用 2.1.OpenFeign 常规远程调用2.2.OpenFeign 微服务使用步骤2.3.OpenFeign 超时控制2.4.OpenFeign 日志打印2.5.O…...
全自动双轴晶圆划片机:半导体制造的关键利器
随着科技的飞速发展,半导体行业正以前所未有的速度向前迈进。在这个过程中,全自动双轴晶圆划片机作为一种重要的设备,在半导体晶圆、集成电路、QFN、发光二极管、miniLED、太阳能电池、电子基片等材料的划切过程中发挥着举足轻重的作用。 全自…...
Android Studio 安装和使用
前些天,打开了几年前的一个Android Studio app项目,使用安卓虚拟机仿真app崩溃,怀疑是不是中间升级过Android Studio导致异常的,马上脑子一热卸载了,结果上次踩过的坑,一个没少又踩一次,谨以此文…...
CXL内存池实现GPU显存零拷贝访问
CXL内存池在大模型训练中实现GPU显存“零拷贝访问”的核心原理,是通过建立缓存一致性的统一内存地址空间,使得GPU能够像访问本地显存(HBM)一样,直接通过加载/存储(Load/Store)指令访问远端的CXL…...
GPT模型评估实战:开源工具gpt-stats构建多维度能力评测体系
1. 项目概述:一个为GPT模型“体检”的开源利器如果你和我一样,日常工作中经常和各类GPT模型打交道,无论是调用OpenAI的官方API,还是部署、微调开源的Llama、Qwen等模型,心里总会萦绕着一个问题:这个模型到底…...
学Simulink——弱电网条件下双向DC-AC逆变器的鲁棒电流控制仿真
目录 手把手教你学Simulink——弱电网条件下双向DC-AC逆变器的鲁棒电流控制仿真 一、背景与挑战 1.1 什么是弱电网?为什么它“弱”? 1.2 核心痛点与鲁棒控制目标 二、系统架构与核心控制推导 2.1 整体架构:功率级(含 Lg&am…...
Djot表格制作教程:简单创建专业级数据展示
Djot表格制作教程:简单创建专业级数据展示 【免费下载链接】djot A light markup language 项目地址: https://gitcode.com/gh_mirrors/dj/djot 想要在文档中快速创建美观的表格吗?Djot表格功能让数据展示变得简单高效!Djot作为一款轻…...
Go泛型实战经验总结:何时应该在新老项目中采用泛型
Go泛型实战经验总结:何时应该在新老项目中采用泛型 【免费下载链接】go-generics-the-hard-way A hands-on approach to getting started with Go generics. 项目地址: https://gitcode.com/gh_mirrors/go/go-generics-the-hard-way Go泛型是Go 1.18版本引入…...
智能体开发爆发期!程序员现在转型,还能赶上红利吗?
文章目录 前言一、为什么2026年是智能体开发的爆发元年?1.1 市场数据说话:万亿级赛道正在加速形成1.2 企业需求爆发:从"要不要做"到"怎么做"1.3 薪资差距拉大:同样3年经验,薪资差一倍 二、90%程序…...
携程问道(workbuddy 合作版)技能接入与使用文档
本文档详细介绍携程问道(workbuddy 合作版)技能(wendao-partner-workbuddy-skill)的接入流程、使用方法、环境配置及注意事项,适用于需要集成该技能并调用携程问道 API 获取旅行相关信息的开发 / 运维人员。一、技能概…...
QQ群数据采集终极指南:3分钟快速上手自动化采集工具
QQ群数据采集终极指南:3分钟快速上手自动化采集工具 【免费下载链接】QQ-Groups-Spider QQ Groups Spider(QQ 群爬虫) 项目地址: https://gitcode.com/gh_mirrors/qq/QQ-Groups-Spider 还在为手动收集QQ群信息而烦恼吗?每天…...
5G网络优化实战:手把手教你配置gNB切换策略(盲切、基于覆盖、基于优先级)
5G网络切换策略深度配置指南:从实验室到现网的实战解析 在5G网络部署中,无缝切换是保障用户体验的核心技术之一。想象一下,当用户在地铁通勤时观看4K视频,或在高速公路上进行视频会议,网络连接的稳定性直接取决于基站间…...
2026年南京GEO优化行业乱象解析:差异化痛点与行业合规发展建议
伴随生成式人工智能普及,GEO生成式引擎优化成为南京本地企业数字化布局的重要渠道。2026年本地传统线下企业、中小型工贸企业、服务业企业普遍入局AI内容优化赛道。目前南京GEO服务市场入局主体繁杂,包含传统SEO转型团队、小型个人工作室、本土科技企业、…...
