这篇“vue3 vite异步组件及路由懒加载怎么应用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue3 vite异步组件及路由懒加载怎么应用”文章吧。
异步组件声明方法的改变：Vue 3.x 新增一个辅助函数defineAsyncComponent，用来显示声明异步组件
异步组件高级声明方法中的 component 选项更名为loader
loader绑定的组件加载函数不再接收resolve和reject参数，而且必须返回一个Promise
现在，在 Vue 3 中，由于函数组件被定义为纯函数，异步组件定义需要通过将其包装在一个新的 defineAsyncComponent helper 中来显式定义。
2-1-1.在 Vue 2.x 中，声明一个异步组件只需这样：
计算
安全
数据库
网络和加速
企业服务
const asyncPage = () => import('./views/home.vue')2-1-2.在 Vue 3.x 中，异步组件的导入需要使用辅助函数defineAsyncComponent来进行显式声明。如下：
<template>
<div>
<h2>Async Components</h2>
<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-1.Vue 2.x中异步组件的声明有更高级的声明方式。如下：
const asyncPageWithOptions = {
component: () => import('./views/home.vue'),
delay: 200,
timeout: 3000,
error: ErrorComponent,
loading: LoadingComponent
}所以，下面的异步组件声明：
const asyncPage = () => import('./views/home.vue')等价于：
const asyncPageWithOptions = {
component: () => import('./views/home.vue')
}2-2-2.Vue 3.x中也可以这样声明异步组件。只是其中的component需要改为loader。如下：
const asyncPageWithOptions = defineAsyncComponent({
loader: () => import('./views/home.vue'),
delay: 200,
timeout: 3000,
error: ErrorComponent,
loading: LoadingComponent
})2-3-1.在Vue 2.x中接收resolve和reject：
// 2.x version
const oldAsyncComponent = (resolve, reject) => {
/* ... */
}2-3-2.在Vue 3.x中始终返回Promise：
// 3.x version
const asyncComponent = defineAsyncComponent(
() => new Promise((resolve, reject) => {
/* ... */
})
)Vue 3.x的异步组件加载函数将不再接收resolve和reject，而且必须始终返回Promise。也就是说，工厂函数接收 resolve 回调的方式定义异步组件在 Vue 3.x 不能使用了。
// 在 Vue 3.x 中不适用
export default {
components: {
asyncPage: resolve => require(['@/components/list.vue'], resolve)
},
}提示： 如果是用vite工具来构建项目，在本地开发使用import做路由懒加载，可以正常加载，但是会报警告；打包到生产环境会报错，页面不会正常展示，可以使用以下两种方法来实现。
3-1-1.defineAsyncComponent方法
// 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.上面的方法相当于一次性加载了 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}`]
}
// ...
],
})<template>
<div>
<h2>Async Components</h2>
<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>以上就是关于“vue3 vite异步组件及路由懒加载怎么应用”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
