在 Vue2
中,异步组件和路由懒加载处理使用 import
就可以很轻松实现。但是在Vue 3.x
中异步组件的使用与 Vue 2.x
完全不同了。本文就详细讲讲vue3
中异步组件
和路由懒加载
的实现。
一、前言
1-1.三点变化:
- 异步组件声明方法的改变:
Vue 3.x
新增一个辅助函数defineAsyncComponent
,用来显示声明异步组件 - 异步组件高级声明方法中的
component
选项更名为loader
loader
绑定的组件加载函数不再接收resolve
和reject
参数,而且必须返回一个Promise
1-2.引入辅助函数defineAsyncComponent
的原因:
现在,在
Vue 3
中,由于函数组件
被定义为纯函数
,异步组件定义需要通过将其包装在一个新的defineAsyncComponent helper
中来显式定义。
二、Vue 2.x与Vue 3.x定义比较
2-1.异步组件/路由定义比较
- 1.在
Vue 2.x
中,声明一个异步组件只需这样:
1 | const asyncPage = () => import('./views/home.vue') |
- 2.在
Vue 3.x
中,异步组件的导入需要使用辅助函数defineAsyncComponent
来进行显式声明。如下:
1 | <template> |
2-2.声明方式比较
- 1.
Vue 2.x
中异步组件的声明有更高级的声明方式。如下:
1 | const asyncPageWithOptions = { |
所以,下面的异步组件声明:
1 | const asyncPage = () => import('./views/home.vue') |
等价于:
1 | const asyncPageWithOptions = { |
- 2.
Vue 3.x
中也可以这样声明异步组件。只是其中的component
需要改为loader
。如下:
1 | const asyncPageWithOptions = defineAsyncComponent({ |
2-3.异步组件加载函数
返回比较
- 1.在
Vue 2.x
中接收resolve
和reject
:
1 | // 2.x version |
- 2.在
Vue 3.x
中始终返回Promise
:
1 | // 3.x version |
Vue 3.x的异步组件加载函数将不再接收resolve
和reject
,而且必须始终返回Promise
。也就是说,工厂函数接收 resolve
回调的方式定义异步组件在 Vue 3.x
不能使用了。
1 | // 在 Vue 3.x 中不适用 |
三、Vue3
实践
提示: 如果是用vite
工具来构建项目,在本地开发使用import
做路由懒加载
,可以正常加载,但是会报警告;打包到生产环境
会报错,页面不会正常展示,可以使用以下两种方法来实现。
3-1.路由懒加载实现
- 1.
defineAsyncComponent
方法
1 | // router/index.js |
- 2.
import.meta.glob
方法
1 | // 1.上面的方法相当于一次性加载了 views 目录下的所有.vue文件,返回一个对象 |
3-2.异步组件实现
1 | <template> |
四、总结
简单来说,写在
路由
配置文件中的异步加载就是路由懒加载
的用法,而写在组件内部
的异步加载就是异步组件用法。
《Vue3学习与实战》系列
- Vue3学习与实战 · 组件通信
- Vue3学习与实战 · 全局挂载使用Axios
- Vue3学习与实战 · 配置使用vue-router路由
- Vue3学习与实战 · Vuex状态管理
- vue3 + vite实现异步组件和路由懒加载(本文)
- Vite+Vue3+Vant快速构建项目
欢迎访问:个人博客地址
本文作者: Tiven
发布时间: 2021-09-09
最后更新: 2022-04-20
本文标题: vue3 + vite实现异步组件和路由懒加载
本文链接: https://www.tiven.cn/p/d41c4425/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!
发布时间: 2021-09-09
最后更新: 2022-04-20
本文标题: vue3 + vite实现异步组件和路由懒加载
本文链接: https://www.tiven.cn/p/d41c4425/
版权声明: 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处!