Vue3 vue-router 实现路由懒加载

29 min read

在 Vue3 中，可以使用 @loadable/component 包来实现路由的懒加载。下面是一种可能的实现方式：

  1. 首先，安装 @loadable/component 包：
npm install @loadable/component
  1. 在路由组件中使用懒加载：
// 导入 loadable 组件
import { defineAsyncComponent } from '@vue/runtime-dom';

// 定义异步加载组件函数
const LoadableComponent = (loader) => defineAsyncComponent({
  loader,
  delay: 200, // 可选的延迟加载时间，默认是 200ms
  timeout: 10000, // 可选的超时时间，默认是 10000ms
  errorComponent: () => '<div>加载失败</div>', // 可选的错误组件
  loadingComponent: () => '<div>加载中...</div>', // 可选的加载中组件
  suspensible: false, // 可选的是否支持 Suspense，默认是 false
});

// 路由配置
const routes = [
  {
    path: '/',
    component: LoadableComponent(() => import('./views/Home.vue')),
  },
  {
    path: '/about',
    component: LoadableComponent(() => import('./views/About.vue')),
  },
  // ...
]

在上面的代码中，我们使用 defineAsyncComponent 函数将路由组件包装成一个懒加载组件。loader 参数接受一个函数，这个函数返回一个动态 import 语句，用于异步加载路由组件。

  1. 在路由配置中使用懒加载组件：
import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes,
});

在创建路由实例时，将懒加载组件作为路由的 component 属性值。

这样就实现了路由的懒加载。当访问路由时，对应的组件将会被异步加载并渲染。