路由懒加载

懒加载本质是延迟加载或按需加载，即在需要的时候的时候进行加载。
首页不用设置懒加载，一个页面加载过后再次访问不会重复加载。

为什么要进行路由懒加载

当进行打包构建应用时，打包后的代码逻辑实现包可能会非常大。当用户要去使用的时候，那么就会把所有的资源都请求下来才可以。
当我们把不同的路由对应的组件分别打包，在路由被访问时再进行加载，就会更加高效。

路由懒加载所做的事情

将路由对应的组件加载成一个个对应的js包。
在路由被访问时才将对应的组件加载。

vue异步组件

语法:component：resolve=>(require(['需要加载的路由的地址'])，resolve)

// 官方文档：https://vue3js.cn/router4/guide/#html
// 引入vue-router对象
import { createRouter, createWebHistory, createWebHashHistory, ErrorHandler } from "vue-router";
/*** 定义路由数组*/
const routes = [{// 404路由path: '/404',name: '404',component: resolve=>(require(["/@/views/404.vue"],resolve))},
];/*** 创建路由*/
const router = createRouter({history: createWebHistory("/"),routes,
});
/*** 输出对象*/
export default router;

ES import 常用

用户访问组件时，该箭头函数被执行
webpack：import动态导入语法能将该文件单独打包
语法：const xxx = （）=>import('需要加载的模块地址')

// 官方文档：https://vue3js.cn/router4/guide/#html
// 引入vue-router对象
import { createRouter, createWebHistory, createWebHashHistory, ErrorHandler } from "vue-router";
/*** 定义路由数组*/
const routes = [{// 404路由path: '/404',name: '404',component: ()=>import('/@/views/404.vue')},
];/*** 创建路由*/
const router = createRouter({history: createWebHistory("/"),routes,
});
/*** 输出对象*/
export default router;

vue中的路由懒加载相关推荐

vue中ztree使用懒加载的方法
vue中ztree使用懒加载的方法正常引用过后使用: import tree from "vue-giant-tree"; <tree:setting="sett ...
Vue项目开发中使用路由懒加载
Vue项目开发中使用懒加载一.使用路由懒加载的好处当打包项目时,JavaScript包会变的非常大,影响页面加载,要是通过把不同的路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应 ...
vue中实现图片懒加载的方法（一）
1.背景: 前几天项目需求实现了图片瀑布流布局,就想着自己再实现图片的懒加载,瀑布流布局配合图片懒加载. 2.懒加载的意义图片懒加载为的是提升网页性能,减少图片在同一时间请求很多网络图片资源,当然是 ...
Vue—核心概念—异步组件和路由懒加载
原文地址:Vue 异步组件&路由懒加载目录异步组件异步组件介绍异步组件声明高级异步组件路由懒加载路由懒加载介绍路由懒加载方法把组件按组分块异步组件异步组件介绍在开发大型 ...
vue路由懒加载--2种实现方式
(1)vue异步组件-路由懒加载 component:resolve=>(['需要加载的路由的地址',resolve]) (2)import 实现路由懒加载 [ 推荐 ] const Hell ...
前端学习（2742）：重读vue电商网站52之路由懒加载
当打包构建项目时,JavaScript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 具体需要 3 步: 安 ...
vue“路由懒加载” 技术，让网页快速加载（优化篇）
(含代码示例.截图演示)让中大型vue项目,按需加载文件,让网页快速渲染! 官方文档:路与懒加载所谓的路由懒加载: 代码示例 · 对比: 1. 没有优化的代码(截图1 · 省略) import Vu ...
图片懒加载和Vue路由懒加载
图片懒加载什么是懒加载? 懒加载也叫做延迟加载或者按需加载 .在长网页中延迟加载暂时未看到的图片数据,能够优化网页性能,提高用户体验 .在较长的网页或应用中,如果图片很多,等待全部图片都被加载出来需 ...
Vue路由懒加载报错问题解决
使用Vue路由懒加载时报了以下错误: 经过百度发现,出现该问题的原因是: import 属于异步引用组件,需要特殊的babel-loader处理解决办法: 安装babel用来编译import异步引用 ...

vue中的路由懒加载

文章目录

路由懒加载

vue异步组件

ES import 常用

vue中的路由懒加载相关推荐

最新文章

热门文章