置顶

vue3 + vite实现异步组件和路由懒加载


字数:1k 阅读时长:4分钟 阅读:85

Vue2 中,异步组件和路由懒加载处理使用 import 就可以很轻松实现。但是在Vue 3.x 中异步组件的使用与 Vue 2.x 完全不同了。本文就详细讲讲vue3异步组件路由懒加载的实现。

Vue3 异步组件/路由

一、前言

1-1.三点变化:

  1. 异步组件声明方法的改变:Vue 3.x 新增一个辅助函数defineAsyncComponent,用来显示声明异步组件
  2. 异步组件高级声明方法中的 component 选项更名为loader
  3. loader绑定的组件加载函数不再接收resolvereject参数,而且必须返回一个Promise

1-2.引入辅助函数defineAsyncComponent的原因:

现在,在 Vue 3 中,由于函数组件被定义为纯函数,异步组件定义需要通过将其包装在一个新的 defineAsyncComponent helper 中来显式定义。

二、Vue 2.x与Vue 3.x定义比较

2-1.异步组件/路由定义比较

  • 2-1-1.在 Vue 2.x 中,声明一个异步组件只需这样:
1
const asyncPage = () => import('./views/home.vue')
  • 2-1-2.在 Vue 3.x 中,异步组件的导入需要使用辅助函数defineAsyncComponent来进行显式声明。如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
<div>
<h1>Async Components</h1>
<p>异步组件测试</p>
<child />
</div>
</template>

<script>
import { defineAsyncComponent } from 'vue'
const child = defineAsyncComponent(() => import('@/components/async-component-child.vue'))

export default {
name: 'async-components',
components:{
'child': child
}
};
</script>

2-2.声明方式比较

  • 2-2-1.Vue 2.x中异步组件的声明有更高级的声明方式。如下:
1
2
3
4
5
6
7
const asyncPageWithOptions  = {
component: () => import('./views/home.vue'),
delay: 200,
timeout: 3000,
error: ErrorComponent,
loading: LoadingComponent
}

所以,下面的异步组件声明:

1
const asyncPage = () => import('./views/home.vue')

等价于:

1
2
3
const asyncPageWithOptions  = {
component: () => import('./views/home.vue')
}
  • 2-2-2.Vue 3.x中也可以这样声明异步组件。只是其中的component需要改为loader。如下:
1
2
3
4
5
6
7
const asyncPageWithOptions  = defineAsyncComponent({
loader: () => import('./views/home.vue'),
delay: 200,
timeout: 3000,
error: ErrorComponent,
loading: LoadingComponent
})

2-3.异步组件加载函数返回比较

  • 2-3-1.在Vue 2.x中接收resolvereject
1
2
3
4
// 2.x version
const oldAsyncComponent = (resolve, reject) => {
/* ... */
}
  • 2-3-2.在Vue 3.x中始终返回Promise
1
2
3
4
5
6
// 3.x version
const asyncComponent = defineAsyncComponent(
() => new Promise((resolve, reject) => {
/* ... */
})
)

Vue 3.x的异步组件加载函数将不再接收resolvereject,而且必须始终返回Promise。也就是说,工厂函数接收 resolve 回调的方式定义异步组件在 Vue 3.x 不能使用了。

1
2
3
4
5
6
// 在 Vue 3.x 中不适用
export default {
components: {
asyncPage: resolve => require(['@/components/list.vue'], resolve)
},
}

三、Vue3实践

提示: 如果是用vite工具来构建项目,在本地开发使用import路由懒加载,可以正常加载,但是会报警告;打包到生产环境会报错,页面不会正常展示,可以使用以下两种方法来实现。

3-1.路由懒加载实现

  • 3-1-1.defineAsyncComponent方法
1
2
3
4
5
6
7
8
9
10
11
// router/index.js
import { defineAsyncComponent } from 'vue'
const _import = (path) => defineAsyncComponent(() => import(`../views/${path}.vue`));

const routes = [
{
path: '/async-component',
name: 'asyncComponent',
component: _import('home'),
}
];
  • 3-1-2.import.meta.glob方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 1.上面的方法相当于一次性加载了 views 目录下的所有.vue文件,返回一个对象
const modules = import.meta.glob('../views/*/*.vue');
const modules ={
"../views/about/index.vue": () => import("./src/views/about/index.vue")
}

// 2.动态导入的时候直接,引用
const router = createRouter({
history: createWebHistory(),
routes: [
// ...
{
path: 'xxxx',
name: 'xxxxx',
// 原来的方式,这个在开发中可行,但是生产中不行
// component: () => import(`../views${menu.file}`),
// 改成下面这样
component: modules[`../views${filename}`]
}
// ...
],
})

3-2.异步组件实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
<div>
<h1>Async Components</h1>
<p>异步组件测试</p>
<child></child>
</div>
</template>

<script>
import { defineAsyncComponent } from 'vue'
const child = defineAsyncComponent(() => import('@/components/async-component-child.vue'))

export default {
name: 'async-components',
components:{
'child': child
}
};
</script>

四、总结

简单来说,写在路由配置文件中的异步加载就是路由懒加载的用法,而写在组件内部的异步加载就是异步组件用法。


欢迎访问:个人博客地址

本文作者: Tiven
发布时间: 2021-09-09
最后更新: 2021-11-24
本文标题: vue3 + vite实现异步组件和路由懒加载
本文链接: https://www.tiven.cn/p/d41c4425/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
知识共享许可协议
畅所欲言