当前位置: 首页 > news >正文

【vue-router】Vue-router如何实现路由懒加载

在这里插入图片描述

✨✨ 欢迎大家来到景天科技苑✨✨

🎈🎈 养成好习惯,先赞后看哦~🎈🎈

🏆 作者简介:景天科技苑
🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。
🏆《博客》:Python全栈,Golang开发,云原生开发,前后端框架,PyQt5和Tkinter桌面开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi,flask等框架,云原生K8S集群搭建与管理,linux,shell脚本等实操经验,网站搭建,数据库等分享。

所属的专栏:前端零基础,实战进阶教学
景天的主页:景天科技苑

文章目录

  • Vue-Router路由懒加载
    • 一、Vue-Router简介
    • 二、什么是路由懒加载
    • 三、路由懒加载的实现方式
      • 1. 箭头函数+import
      • 2. 箭头函数+require
      • 3. require.ensure
    • 四、动态路由和懒加载
      • 1. 定义动态路由
      • 2. 获取动态参数
    • 五、路由懒加载的最佳实践
      • 1. 合理使用代码分割
      • 2. 使用Webpack的prefetch和preload指令

Vue-Router路由懒加载

在现代前端开发中,Vue.js凭借其轻量级和易用性,成为了很多开发者的首选框架。然而,在构建大型单页应用(SPA)时,初始加载时间可能会变得非常长,影响用户体验。为了解决这个问题,Vue.js引入了路由懒加载机制。本文将结合实际案例,详细讲解Vue-Router路由懒加载的用法。

一、Vue-Router简介

Vue Router是Vue.js官方的路由管理器,它允许你以一种简单的方式构建单页面应用中的页面路由。Vue Router提供了强大的路由管理功能,包括嵌套路由、动态路由、路由守卫等。

要使用Vue Router,首先需要安装它。你可以通过npm或yarn进行安装:

npm install vue-router
# 或者
yarn add vue-router

安装完成后,你需要在Vue项目中配置Vue Router。下面是一个简单的配置示例:

import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';Vue.use(Router);const router = new Router({routes: [{ path: '/', component: Home },{ path: '/about', component: About },],
});export default router;

在上述代码中,我们定义了两个路由:首页(/)和关于页(/about)。当用户访问这些路由时,对应的组件会被渲染到页面上。

二、什么是路由懒加载

在构建大型单页应用时,如果将所有路由和组件都打包在一起,会导致初始加载时间非常长。为了解决这个问题,Vue.js引入了路由懒加载机制。路由懒加载是指只有在需要访问某个路由时,才加载该路由对应的组件代码。这样可以显著减少初始加载时间,提高应用程序的性能。

Vue Router的懒加载依赖于Webpack的代码分割功能。Webpack会将每个懒加载的组件打包成一个独立的代码块(chunk),并在需要时动态加载。

三、路由懒加载的实现方式

Vue Router的懒加载可以通过多种方式实现,主要包括箭头函数+import、箭头函数+require以及require.ensure等。以下是这些方式的详细介绍和示例。

1. 箭头函数+import

这是Vue Router懒加载中最推荐的方式,因为它语法简洁、直观易懂,并且符合现代JavaScript标准。使用箭头函数和import()函数可以实现路由的懒加载。

const Home = () => import('./components/Home.vue');
const About = () => import('./components/About.vue');const router = new Router({routes: [{ path: '/', component: Home },{ path: '/about', component: About },],
});

在上述代码中,Home和About组件都是通过箭头函数和import()函数实现的懒加载。当用户访问首页或关于页时,对应的组件才会被加载。

你还可以为生成的代码块指定名称,以便更好地管理和调试。

const Home = () => import(/* webpackChunkName: "home" */ './components/Home.vue');
const About = () => import(/* webpackChunkName: "about" */ './components/About.vue');

这样,Webpack会将Home和About组件分别打包成名为home.jsabout.js的代码块。

2. 箭头函数+require

在一些旧版本的构建工具中,你可能会看到使用箭头函数和require()函数来实现路由懒加载的方式。虽然这种方式仍然有效,但相对于箭头函数+import来说,它的语法相对复杂,不够直观。

const router = new Router({routes: [{path: '/',component: resolve => require(['./components/Home.vue'], resolve),},{path: '/about',component: resolve => require(['./components/About.vue'], resolve),},],
});

在上述代码中,Home和About组件都是通过箭头函数和require()函数实现的懒加载。当用户访问首页或关于页时,对应的组件才会被加载。

需要注意的是,require()函数是CommonJS规范中的模块导入方式,而在现代JavaScript开发中,ES6的import/export规范更为常用。因此,推荐使用箭头函数+import的方式来实现路由懒加载。

3. require.ensure

require.ensure是Webpack 1.x版本中用于代码分割和懒加载的API。然而,在Webpack 2.x及以上版本中,require.ensure已经被废弃,推荐使用动态import(即import()函数)来替代。因此,在现代Vue项目中,你几乎不会看到使用require.ensure来实现路由懒加载的情况。

不过,为了完整性,这里还是简单介绍一下require.ensure的用法。

const Home = r => require.ensure([], () => r(require('./components/Home.vue')), 'home');
const About = r => require.ensure([], () => r(require('./components/About.vue')), 'about');const router = new Router({routes: [{ path: '/', component: Home, name: 'Home' },{ path: '/about', component: About, name: 'About' },],
});

在上述代码中,Home和About组件都是通过require.ensure实现的懒加载。然而,由于require.ensure已经被废弃,这种方式在现代Vue项目中不再推荐使用。

四、动态路由和懒加载

在Vue Router中,动态路由允许你定义路径时使用占位符,这些占位符将会被实际的数值所替代。通过动态路由和懒加载的结合,你可以实现更加灵活和高效的路由管理。

1. 定义动态路由

动态路由的定义非常简单,只需要在路径中使用占位符即可。例如,定义一个动态路由/user/:id,其中:id就是动态的参数。

const UserProfile = () => import('./components/UserProfile.vue');const router = new Router({routes: [{ path: '/user/:id', component: UserProfile, name: 'UserProfile' },],
});

在上述代码中,我们定义了一个动态路由/user/:id,并为其指定了UserProfile组件。当用户访问/user/123时,UserProfile组件会被加载,并且可以通过$route.params.id来获取传递过来的动态参数id

2. 获取动态参数

在组件中,你可以通过$route.params来获取传递过来的动态参数。例如,在UserProfile组件中,你可以这样获取id参数:

export default {created() {console.log(this.$route.params.id); // 输出传递过来的id参数},
};

五、路由懒加载的最佳实践

在使用Vue Router的懒加载功能时,有一些最佳实践可以帮助你更好地优化应用程序的性能和用户体验。

1. 合理使用代码分割

代码分割是Webpack的一个重要功能,它可以将代码拆分成多个独立的代码块,并在需要时动态加载。在使用Vue Router的懒加载功能时,你应该合理使用代码分割,将不同的路由组件拆分成不同的代码块。

例如,你可以将首页、关于页、用户详情页等不同的路由组件拆分成不同的代码块,并在需要时动态加载它们。

const Home = () => import(/* webpackChunkName: "home" */ './components/Home.vue');
const About = () => import(/* webpackChunkName: "about" */ './components/About.vue');
const UserProfile = () => import(/* webpackChunkName: "userProfile" */ './components/UserProfile.vue');const router = new Router({routes: [{ path: '/', component: Home, name: 'Home' },{ path: '/about', component: About, name: 'About' },{ path: '/user/:id', component: UserProfile, name: 'UserProfile' },],
});

2. 使用Webpack的prefetch和preload指令

Webpack提供了prefetch和preload指令,可以帮助你更好地优化代码的加载性能。prefetch指令会在浏览器空闲时预加载指定的代码块,而preload指令则会在当前代码块加载时立即预加载指定的代码块。

你可以在使用Vue Router的懒加载功能时,结合Webpack的prefetch和preload指令来进一步优化代码的加载性能。

const Home = () => import(/* webpackPrefetch: true */ './components/Home.vue');
const About = () => import(/* webpackPreload: true */ './components/About.vue');const router = new Router({routes: [{ path: '/', component: Home, name: 'Home' },{ path: '/about', component: About, name: 'About' },],
});

在上述代码中,我们使用了Webpack的prefetch和preload指令来优化Home和About组件的加载性能。需要注意的是,preload指令通常用于关键路径上的代码块,而prefetch指令则用于非关键路径上的代码块。

相关文章:

【vue-router】Vue-router如何实现路由懒加载

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,…...

Linux网络编程基础

目录 一、网络发展历史和分层 1.1Internet的历史 1.2网络的体系结构 1.2.1OSI模型 1.2.2TCP/IP协议族 1.2.3各层典型协议 1.2.4网络的封包和拆包 二、网络编程的预备知识 2.1Socket 2.1.1概念 2.1.2类型 2.2IP地址 2.3端口号 2.4字节序 一、网络发展历史和分层 …...

MySQL中的幻读问题

1. 什么是幻读? 幻读是一种数据库事务中可能出现的并发问题,具体表现为:在同一个事务中,前后两次查询的结果集不同,仿佛“幻影”一般,出现了原本不存在的数据。 1.1 具体表现: 现象描述 事务 A…...

AI后端工程师面试题的内容

AI后端工程师面试题主要包括以下几个方面的内容‌: ‌一、技术基础和项目经验‌: ‌1. 微服务架构的理解和应用‌:请描述你对微服务架构的理解,并举例说明一个你参与过的微服务项目,阐述你在该项目中扮演的角色和所承…...

MFC工控项目实例三十五读取数据库数据

点击按钮打开文件夹中的数据文件生成曲线 相关代码 void CSEAL_PRESSUREDlg::OnTesReport() {CFileDialog dlgOpen(TRUE/*TRUE打开,FALSE保存*/,0,0,OFN_NOCHANGEDIR|OFN_FILEMUSTEXIST,"All Files(mdb.*)|*.*||",//文件过滤器NULL);CString mdb_1, m…...

OpenWrt -制作ubifs文件系统的固件

目的 创建一个ubifs为文件系统的镜像 将backup目录中的内容打包成ubifs文件系统。 ubifs的分区定义 ubi-backup.cfg 文件内容如下, [backup] modeubi imagenand-ipq6018-single.img vol_id0 vol_typedynamic vol_namebackup [bkver] modeubi imagebackup.ubifs v…...

C++ - 继承

继承的基本概念 继承就是一种代码的复用. 子类通过继承父类, 就能使用父类的变量, 方法. 学生和老师这两种身份, 他们都有共同的属性: 他们都有名称, 年龄, 性别 .... 当然他们也有各种独有的属性, 学生有学号, 老师有工号 .... 对于这些共有的属性, 我们可以将它们提取出来: …...

华为服务器使用U盘重装系统

一、准备工作 下载官方系统(注意服务器CPU的架构是x86-64还是aarch64,不然可能报意想不到的错)制作启动U盘(下载rufus制作工具,注意文件系统选FAT32还是NTFS) 二、安装步骤 将U盘插入USB接口重启服务器…...

网络分层模型( OSI、TCP/IP、五层协议)

1、网络分层模型 计算机网络是一个极其复杂的系统。想象一下最简单的情况:两台连接在网络上的计算机需要相互传输文件。不仅需要确保存在一条传输数据的通路,还需要完成以下几项工作: 发起通信的计算机必须激活数据通路,这包括发…...

前端开发 之 15个页面加载特效上【附完整源码】

文章目录 一:彩球环绕加载特效1.效果展示2.HTML完整代码 二:跷跷板加载特效1.效果展示2.HTML完整代码 三:两个圆形加载特效1.效果展示2.HTML完整代码 四:半环加载特效1.效果展示2.HTML完整代码 五:音乐波动加载特效1.效…...

Spring Boot使用JDK 21虚拟线程

JDK 21引入的虚拟线程(Virtual Threads)是 Project Loom 的一部分,旨在显著简化并发编程并提高 Java 应用的可扩展性。以下是虚拟线程的主要特点: 1. 概念 虚拟线程是轻量级线程,与传统的操作系统线程不同&#xff0…...

《从0到1常用Map集合核心摘要 + 不深不浅底层核心》

《从0到1常用Map集合核心摘要不深不浅底层核心》 前置知识 什么是键值对 ​ 键值对是一种数据结构,键是唯一标识,值是对应数据,用来快速查找信息。例: {"name": "Alice"},键是name,…...

12 设计模式之工厂方法模式

一、什么是工厂方法模式? 1.定义 在软件开发中,设计模式 是解决常见软件设计问题的最佳实践。而 工厂方法模式(Factory Method Pattern) 作为创建型设计模式之一,常常被用来解决对象创建问题。它通过将对象的创建交给…...

spaCy 入门与实战:强大的自然语言处理库

spaCy 入门与实战:强大的自然语言处理库 spaCy 是一个现代化、工业级的自然语言处理(NLP)库,以高效、易用和功能丰富著称。它被广泛应用于文本处理、信息提取和机器学习任务中。本文将介绍 spaCy 的核心功能,并通过一…...

python包的管理和安装——笔记

1.列出包 pip list pip freeze 用这2个可以查看当前python 下所有的包和版本,还有下载地址 如果只是想导出当前的环境 可以用 2.安装pipreqs pip install pipreqs,pipreqs ./可以导出当前项目的包这个包 遇到编码报错 pipreqs ./ --encodingutf8 p…...

Vue前端页面内嵌套本项目iframe窗口的通信传输方式

一、目的 想要在iframe中使用本项目页面、并能够与其父页面组件实现实时通信。Vue前端页面内嵌套本项目iframe窗口的通信传输方式-星林社区 https://www.jl1mall.com/forum/PostDetail?postId20241202172800023969 二、iframe通信方式 1.接收消息 页面需要监听 message 事件…...

【WEB开发.js】addEventListener事件监听器的绑定和执行次数的问题(小心踩坑)

假设我们有一个按钮,用户点击该按钮后,会选择一个文件,且我们希望每次点击按钮时只触发一次文件处理。下面我会给你一个简单的例子,展示放在函数内部和放在函数外部的区别。 1. 将事件监听器放在函数内部(问题的根源&…...

用于LiDAR测量的1.58um单芯片MOPA(一)

--翻译自M. Faugeron、M. Krakowski1等人2014年的文章 1.简介 如今,人们对高功率半导体器件的兴趣日益浓厚,这些器件主要用于遥测、激光雷达系统或自由空间通信等应用。与固态激光器相比,半导体器件更紧凑且功耗更低,这在低功率供…...

【GPT】代谢概念解读

以下是对代谢中分解代谢和合成代谢两个概念的深入解读,用简单易懂的方式展开说明: 1. 分解代谢(Catabolism) 什么是分解代谢? 分解代谢是身体把大分子“拆开”的过程。就像把一个三明治分解成面包片、肉片和菜叶&#…...

Devops-git篇-01-git环境配置

环境配置 设置用户签名 配置用户名: git config --global user.name 你的用户名 配置邮箱: git config --global user.email 注册的邮箱 配置好之后,可以用git config --global --list命令查看配置是否OK $ git config --global --list u…...

IDEA插件实战:CodeGeeX4不只是补全代码,这5个隐藏用法让效率翻倍

IDEA插件实战:CodeGeeX4不只是补全代码,这5个隐藏用法让效率翻倍 在JetBrains生态中,AI编程助手早已不是新鲜事物,但大多数开发者对CodeGeeX4的认知仍停留在"智能补全"层面。当我在团队内部做技术分享时,发现…...

Linux 内核中的内存管理:从物理内存到虚拟内存

Linux 内核中的内存管理:从物理内存到虚拟内存 引言 作为一名深耕操作系统和嵌入式开发的工程师,我深知资源管理的重要性。在系统开发中,合理的资源管理可以提高系统的性能和可靠性。在 Linux 内核中,内存管理是一个核心组件&…...

硬件(6)——定时器

硬件中如何确定引脚电平的高低?硬件内部有一个比较器,类似门电路,有两个输入一个输出,其中一个输入接稳定的参考值(DCDC 3.3V),另一个输入接引脚。当引脚高于3.3V就输出高电平,引脚低于3.3V就输…...

终极指南:如何用Ice打造清爽Mac菜单栏?2025年最强大的macOS菜单栏管理工具

终极指南:如何用Ice打造清爽Mac菜单栏?2025年最强大的macOS菜单栏管理工具 【免费下载链接】Ice Powerful menu bar manager for macOS 项目地址: https://gitcode.com/GitHub_Trending/ice/Ice Ice是一款强大的macOS菜单栏管理工具,它…...

JAVA 注解(Annotation):从原理到实战应用

在 Java 5 及后续版本中,注解(Annotation)作为一种元数据编程机制,彻底改变了 Java 的配置与框架开发模式。它不再是简单的代码注释,而是能被编译器、虚拟机、框架解析的结构化标记,广泛应用于 Spring Boot…...

【技术选型指南】Avalonia、MAUI、Uno Platform、Flutter、Electron、Qt与Tauri:从场景到决策的深度剖析

1. 跨平台框架选型的核心考量因素 当你准备启动一个新项目或重构现有技术栈时,面对琳琅满目的跨平台框架,选择困难症很容易发作。我经历过多次这样的技术决策过程,发现关键在于先明确项目的核心需求。就像装修房子前要先确定是想要北欧简约风…...

SDMatte与LSTM时序模型结合:处理视频连续帧的稳定抠图

SDMatte与LSTM时序模型结合:处理视频连续帧的稳定抠图 1. 引言:视频抠图的挑战与机遇 视频抠图技术一直是影视后期和直播领域的核心需求。传统方法在处理动态场景时常常面临边缘闪烁、细节丢失和时间不一致等问题。想象一下,当你在视频会议…...

夏中谱加盟无界动力,助力具身智能发展

夏中谱入职无界动力,担重任开启新征程今日,无界动力宣布夏中谱正式加入,担任联合创始人兼联席CTO。这一任命使他全面负责基于世界模型的原生具身智能多模态大模型研发,以及数据闭环、云端仿真等核心技术基础设施的持续建设与升级。…...

双目视觉实战:从标定参数到深度图的完整OpenCV实现指南

双目视觉实战:从标定参数到深度图的完整OpenCV实现指南 在计算机视觉领域,双目立体视觉一直是获取三维环境信息的重要技术手段。与激光雷达等主动传感器相比,基于双相机的立体视觉系统具有成本低、数据丰富、易于部署等优势。本文将深入探讨如…...

OpenCore EFI自动化配置:30分钟实现黑苹果部署的技术民主化革命

OpenCore EFI自动化配置:30分钟实现黑苹果部署的技术民主化革命 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 在数字创作领域&#xff0…...