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

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

所以，下面的异步组件声明：

等价于：

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

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

欢迎访问： 个人博客地址

实现懒加载，并且显示数组中，始终只有3张，上下滑动增加的同时，删除最开始的那一张。可以指定从总的第几张开始加载 。

要实现上下滑动时的动画效果，我这里用到是uni-app自带swiper组件。同时为了解决增加或删除数组时，会重新渲染，导致动画效果未完成，所以用的是animationfinish页面加载后触发的事件

要实现上下滑动时，动画执行完毕之后，要把执行后的那张，始终保持在中间位置。此处，就用到了serper组件中的current，当滑倒第3或者第1张时，给current赋值，使显示的始终在第二张的位置。同时滑动添加的同时，也要删除掉最开始的那一张

当总数组索引位为0时，则定位到第一张。当总数组索引位>0时，则定位到第二张

通过swiper组件current，可以得到当前页面索引值，减去未滑动前的页面索引值。大于0则是向下滑动，小于0则是向上滑动。

判断当前页面是中间的那一张,并且总数组长度大于页面索引值+1时，加载第四张。

setTimeout是为了保证删除时，数组是已经添加进去了的

thisatPresentNodeswiperIndex = 1 保证滑动后的始终在中间位置

判断滑动之后是否在第一张的位置，并且 总索引位大于0

此处先删除后添加是由于先在头部添加时，会改变显示相对于数组的位置，显示的位置就向下延后了一位。所以为了避免这种情况，故而先删除，再添加到头部

代理对象selfscrollViewdelegate = self; 实现(30 NSEC_PER_SEC)), dispatch_get_main_6)frame模型数据的初始化已经采取懒加载的方式(每

---