VUE3（二十二）vue-router 开启路由懒加载

一、为什么要使用路由懒加载

为给客户更好的客户体验，首屏组件加载速度更快一些，解决白屏问题。

二、定义

懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。

三、使用

常用的懒加载方式有两种：即使用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;

有好的建议，请在下方输入你的评论。

欢迎访问个人博客
https://guanchao.site