vue-router路由的懒加载

最新推荐文章于 2023-07-31 15:19:23 发布
最新推荐文章于 2023-07-31 15:19:23 发布
阅读量1.1k 收藏 4
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/csshuaige/article/details/119203029
版权
本文介绍了Vue路由懒加载的概念和优势，它能将不同路由对应的组件分割成独立的代码块，仅在路由被访问时按需加载，从而减少初始加载时的js包大小，提高页面加载速度。通过示例展示了如何在src/index.js中实现路由懒加载，对比了使用前后的网络请求差异。
摘要由CSDN通过智能技术生成

一、认识路由的懒加载

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

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

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

二、路由懒加载的使用

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

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

在这里插入图片描述

  • 使用路由懒加载，点击路由导航2，可以看到发送了一个js请求，这个就是请求的组件在这里插入图片描述
    这就是路由的懒加载，喜欢的朋友可以点赞加收藏哦！
爱干饭的小徐同学
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VueRouter04 路由懒加载
多啦的博客
09-18 558
Vue router 路由懒加载学习笔记。
vue-router路由懒加载的使用
qq_46071321的博客
01-08 141
官方给出了解释： 当打包构建应用时，Javascript包会变得非常大，影响页面的加载 如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了 官方在说什么呢？ 首先，我们知道路由中通常会定义很多不同的页面 这个页面最后被打包在哪里呢？一般情况下，是放在一个js文件中 但是，页面这么多放在一个js文件中，必然会造成这个页面非常的大 如果一次性从服务器请求下来这个页面，可能需要花费一定的时间，甚至用户的电脑上会出现短暂的空白情况 如何避免这种情况呢？使用路由
vue-router路由懒加载
qq_33712668的博客
06-04 1743
定义 也叫延迟加载，即在需要的时候进行加载，随用随载 为什么需要 像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时，进入首页不用一次加载过多资源...
vue-router懒加载
Beamon__的博客
05-22 430
1.在创建路由的配置文件中改变引入组件的方式，将原始引入方式改为异步引入 // 原始引入方式 import Home from "@pages/home"; // 异步引入方式 const Home = () => import('@/pages/home'); 2.修改webpack的output配置 修改 build/webpack.base.conf.js // 添加c...
vue-router路由懒加载的实现（解决vue项目首次加载慢）
10-18
const router = new VueRouter({ routes: [ { path: '/foo', component: () => import('./Foo.vue') // 异步加载Foo组件 } ] }) ``` 在使用懒加载后，可能会遇到的一个问题是，打包工具Webpack在构建过程中会...
vue2笔记 — vue-router路由懒加载的实现
12-09
在Vue.js开发的单页面应用（SPA）中，Vue Router 提供了路由懒加载的功能，以解决由于大型项目导致的打包文件过大的问题。 Vue Router 是 Vue.js 的官方路由库，用于管理SPA中的各个视图组件。在默认情况下，所有...
vue-router路由懒加载和权限控制详解
08-28
"vue-router路由懒加载和权限控制详解" vue-router是Vue.js官方提供的路由管理器，旨在帮助开发者更好地管理单页面应用程序中的路由。今天，我们将详细介绍vue-router路由懒加载和权限控制的相关知识点。 路由懒...
Vue Router系列之路由懒加载
老__L的博客
12-25 395
路由懒加载
vue-router 路由懒加载
04-15 775
进入页面时不需要一次性把资源都加载完，延迟加载，在需要的时候才会进行加载。
vue-router 的路由懒加载
秋来九月八
11-07 332
当开发展完成一个项目，不可能将整个项目的所有路由组件一次性渲染到页面中去，这会导致用户打开页面时间加长，影响用户的体验 所以就需要用路由的懒加载，当用户需要的某一部分路由组件的时候，才通过点击去获取那一部分的路由组件 控制路由的js文件中 一般是router文件夹中的index.js 懒加载的三种方式： **第一种懒加载的书写方式 ** 结合vue的异步组件和webpack代码 const Hom...
vue-router 路由的懒加载
ckk727的博客
03-29 153
首先需要知道，当我们用 npm run build 去打包项目的时候，在生成的dist文件中，它会按照内容分成一个个独立的文件，比如css、js等，其中，在js文件下，默认会生成三种类型的js文件以及相对应的js.map文件，分别是： app.js //自己写的业务逻辑代码 manifest.js //提供底层支撑服务的js代码 vendor.js //第三方引用的js代码 随着我们项目的...
Vue.js之Vue-router路由元信息编程式导航懒加载
a3060858469的博客
04-21 389
路由元信息定义路由的时候可以配置 meta 字段：routes: [ { path: '/foo', component: Foo, children: [ { path: 'bar', component: Bar, // a meta field meta:
vue-router路由懒加载(记录)
weixin_34198583的博客
05-24 204
当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。 项目代码 这次也是刚学到的一段代码,方便项目管理 懒加载路由 目录结构: - router - index.js - router.js 复制代码 router.js : 路由信息文件 export...
vue路由懒加载
shuo的博客
03-15 307
一、懒加载：       也叫延迟加载，就是在需要的时候进行加载，随用随载。二、适用场景：       用vue构建单页面应用，打包的时候，JavaScript包会变得非常大，进入页面需要加载的内容太多，延时过长，不利于用户体验，而使用懒加载可以将页面划分，需要的时候再去加载页面，这样就更加高效了三、懒加载写法：...
vue-router 实现路由懒加载（ 动态加载路由 ）
最新发布
A12536365214的博客
07-31 2268
在Vue.js中，可以使用vue-router来实现路由懒加载，也称为动态加载路由。路由懒加载的目的是在用户访问某个路由时再加载对应的组件，而不是在应用初始化时一次性加载所有组件。这样可以提高应用的初始加载速度，只在需要时才加载对应的组件。要实现路由懒加载，可以使用Vue提供的异步组件加载功能，结合import()函数或webpack的动态import()语法。
vue-router中的路由懒加载
weixin_50240716的博客
12-08 497
路由中普通方式引用组件 路由中通常会定义很多不同的页面。这些页面最后会被打包到一个js文件中。 但是, 页面这么多放在一个js文件中, 必然会造成这个页面非常的大. 如果我们一次性从服务器请求下来这个页面, 可能需要花费一定的时间, 甚至用户的电脑上还出现了短暂空白的情况. 为了避免以上情况，可以使用懒加载。 最后打包出来的文件 路由中懒加载方式引用组件 路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块. 只有在这个路由被访问到的时候, 才加载对应的组件 最后打包出来的文件 .
vue-router如何实现路由懒加载
04-02
在使用 Vue.js 进行项目开发时，通常会使用 vue-router 进行路由管理，而路由懒加载则是一种优化方式，可以在减少页面加载时间的同时，提高用户体验。下面是实现路由懒加载的方法： 1. 安装 babel-plugin-syntax-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值