一、为什么要使用路由懒加载
为给客户更好的客户体验，首屏组件加载速度更快一些，解决白屏问题。
二、定义
懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。
三、使用
常用的懒加载方式有两种：即使用vue异步组件 和 ES中的import
1、未用懒加载，vue中路由代码如下
// 官方文档：https://vue3js.cn/router4/guide/#html // 引入vue-router对象 import { createRouter, createWebHistory, createWebHashHistory, ErrorHandler } from "vue-router"; import view404 from "/@/views/404.vue "; /** * 定义路由数组 */ const routes = [ {// 404路由 path: '/404', name: '404', component: view404 }, ]; /** * 创建路由 */ const router = createRouter({ history: createWebHistory("/"), routes, }); /** * 输出对象 */ export default router;
2、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;
3、ES 提出的import方法，（------最常用------）
方法如下：const HelloWorld = （）=>import('需要加载的模块地址')（不加 { } ，表示直接return）
// 官方文档：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;
