vue-router路由的懒加载

最新推荐文章于 2026-05-24 08:09:22 发布
原创 最新推荐文章于 2026-05-24 08:09:22 发布 · 1.2k 阅读 · 4 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#vue
本文介绍了Vue路由懒加载的概念和优势，它能将不同路由对应的组件分割成独立的代码块，仅在路由被访问时按需加载，从而减少初始加载时的js包大小，提高页面加载速度。通过示例展示了如何在src/index.js中实现路由懒加载，对比了使用前后的网络请求差异。

一、认识路由的懒加载

1.为什么要使用路由懒加载？

     当项目打包时，js的包会变得很大，影响页面的正常加载。如果可以把不同路由对应的不同组件分割成不同的代码块，然后当路由被访问时才加载对应的组件，这样更高效。

2.路由懒加载的作用
  • 将路由对应的组件打包成一个个的js代码块
  • 只有在这个路由被访问时，才加载对应组件

二、路由懒加载的使用

     在src/index.js中使用路由懒加载来替换单纯的导入组件
在这里插入图片描述
运行结果一致：
在这里插入图片描述

  • 没有使用路由懒加载，点击路由导航2，可以看到没有发送请求

在这里插入图片描述

  • 使用路由懒加载，点击路由导航2，可以看到发送了一个js请求，这个就是请求的组件在这里插入图片描述
    这就是路由的懒加载，喜欢的朋友可以点赞加收藏哦！
Vue Router 中的路由懒加载如何正确配置？
Pmyx_wyh的博客
12-19 592
如果你使用的是 Vue CLI 创建的项目，它已经预先配置好了 Webpack 来处理动态导入。在 Vue Router 中配置路由懒加载（也称为代码分割），可以帮助提高应用的初始加载性能，因为只有当用户导航到特定路由时，相应的组件才会被加载。构建项目时，Webpack 将会把不同的路由组件打包成单独的代码块，当用户访问对应的路由时，浏览器将会按需加载这些代码块。如果你有嵌套路由或者需要更复杂的懒加载逻辑，比如根据用户的权限来决定是否懒加载某些组件，你可以按照相同的方式进行配置。），并设置懒加载的路由。
Vue项目开发中使用路由懒加载
小hu同学
04-12 1417
Vue项目开发中使用懒加载 一、使用路由懒加载的好处 当打包项目时，JavaScript包会变的非常大，影响页面加载，要是通过把不同的路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加提供效率。 二、安装相关的依赖包 详细可查看路由官方文档 安装依赖包文档 安装依赖包完成后，需要配置到项目里面 三、在babel.config.js声明该插件依赖 "@babel/...
vue项目优化(一)——路由懒加载的必要性
qq_56989560的博客
05-18 1664
vue项目优化(1)——路由懒加载的必要性
如何扩展MachineID：自定义平台支持的完整开发指南
最新发布
gitblog_00046的博客
05-24 502
MachineID是一个轻量级Go语言库，能够在无需管理员权限的情况下获取跨平台的唯一机器标识。本文将详细介绍如何为这个强大的工具添加自定义平台支持，让你轻松扩展其兼容性范围。 ## 了解MachineID的平台适配架构 MachineID采用了Go语言的条件编译特性，为不同操作系统提供专门的实现。在项目根目录中，你可以看到一系列以`id_`为前缀的文件： - [id_linux.go](h
带你这么认识vue-router『路由的懒加载』
零碎@流年絮语 的博客
02-11 307
认识路由的懒加载 官方的解释: 当打包构建应用时，Javascript 包会变得非常大，影响页面加载。 如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了 官方想表达的意思 首先，我们知道路由中通常会定义很多不同的页面。 这个页面最后被打包在哪里呢? 一般情况下，是放在一个js文件中。 但是，页面这么多放在一个js文件中, 必然会造成这个页面非常的大。 如果我们一次性从服务器请求下来这个页面， 可能需要花费一定的时间，甚至用户的电脑上还出现了短暂空
vue-router 路由懒加载
04-15 907
进入页面时不需要一次性把资源都加载完，延迟加载，在需要的时候才会进行加载。
Ruoyi 若依项目模板创建多级菜单加载失败问题处理以及路由懒加载失败时将组件更换为notfound
JCM_ZZ的博客
05-23 2928
Ruoyi 若依项目模板创建多级菜单加载失败问题处理以及路由懒加载失败时将组件更换为notfound /* 遍历后台传来的路由字符串，转换为组件对象 */ function filterAsyncRouter(asyncRouterMap, isRewrite = false/* 是否重写服务端数据结构 */) { return asyncRouterMap.filter(route => { if (isRewrite && route.children) {
【vue-router】Vue-router如何实现路由懒加载
热门推荐
景天科技苑
11-29 6万+
在现代前端开发中，Vue.js凭借其轻量级和易用性，成为了很多开发者的首选框架。然而，在构建大型单页应用（SPA）时，初始加载时间可能会变得非常长，影响用户体验。为了解决这个问题，Vue.js引入了路由懒加载机制。本文将结合实际案例，详细讲解Vue-Router路由懒加载的用法。
【Vue】vue-router的基本使用 | 路由懒加载 | 补充知识点
森姐姐的博客
11-03 1710
vue-router的基本使用，路由懒加载
如何在Vue Router中实现路由懒加载？
有我更精彩的博客
12-15 1532
路由懒加载是一种在用户请求特定路由时再进行加载相关组件的策略。这样，只有用户需要的时候，才会加载相应的代码，而不会在应用启动时就将所有代码加载到内存中。这不仅能加速初始页面加载速度，还能减少资源的浪费。
vue-router路由懒加载以及嵌套路由的实现
weixin_42738354的博客
10-26 501
一.vue-router打包文件的解析 在vuecli中，打包文件夹dist下会分为css和js文件夹，分别存储css和js打包代码。 而在js文件夹下又分为三部分： app: 存放当前应用程序开发的所有代码（业务代码） manifest: 为了打包的代码做底层支撑 vendor: 提供商，第三方（如vue、vue-router、axios） 二.认识路由的懒加载 当我们在打包构建应用时，打包后的app.js包会变得非常大，甚至会影响到静态资源服务器的查询时间，导致页面加载时间过长。如果我们能把不同路
vue2组件实现懒加载浅析
aaa333qwe的博客
10-17 2407
一、 什么是懒加载       懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。 二、为什么需要懒加载       在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时 三、如
vue-router路由懒加载
longgege001的博客
10-11 1万+
vue-router路由懒加载实践，vue-router路由实现原理简单说明
vue-router路由懒加载的三种实现方式
我思,故我在的博客
03-14 4830
vue-router路由懒加载，也叫延迟加载，即在需要的时候进行加载，随用随载。
Vue实现路由懒加载的几种方式
asfasfaf122的博客
01-29 1万+
vue路由懒加载
vue中vue-router路由懒加载（按需加载）的作用以及常见的实现方法
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
12-06 7131
路由懒加载，也叫延迟加载或按需加载，是在需要的时候进行加载的一种技术。在单页面应用（SPA）中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时需要加载的内容过多，时间过长，会出现长时间的白屏，即使做了loading也不利于用户体验。而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。
vue-router 实现路由懒加载（ 动态加载路由 ）
A12536365214的博客
07-31 2513
在Vue.js中，可以使用vue-router来实现路由懒加载，也称为动态加载路由。路由懒加载的目的是在用户访问某个路由时再加载对应的组件，而不是在应用初始化时一次性加载所有组件。这样可以提高应用的初始加载速度，只在需要时才加载对应的组件。要实现路由懒加载，可以使用Vue提供的异步组件加载功能，结合import()函数或webpack的动态import()语法。
Vue 路由懒加载
chen520的博客
08-12 4425
通过本篇技术博文的学习，我们深入了解了 Vue 路由懒加载的原理和应用。路由懒加载是提升 Web 应用性能的关键技术之一，它能帮助我们在应用中实现按需加载，提高加载速度，优化用户体验。在使用路由懒加载时，我们学会了安装和配置依赖，将路由配置为懒加载，并使用动态导入组件的方式来延迟加载页面。我们还探讨了预加载、组件懒加载、代码拆分和打包策略等进阶技巧，帮助开发人员进一步提升应用性能。当然，除了路由懒加载，我们还可以与其他优化策略相结合，如代码分割等，实现更完善的性能优化。
路由懒加载及实现方式(vue-router)
weixin_42464106的博客
07-26 1万+
什么是路由懒加载？--延迟加载，在需要的时候才会进行加载。实现路由懒加载的方法，vue-router,Vue异步组件 ES6的import() webpack的require.ensure()
前端Vue篇之Vue-Router 的懒加载如何实现、如何定义动态路由？如何获取传过来的动态参数？
星辰迷上大海的博客
03-05 2479
懒加载：在Vue Router中，使用懒加载可以通过import函数和Webpack的代码分割功能来实现。这意味着只有在需要时才会加载相应的组件，而不是一次性加载所有组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值