在 Vue2 中来庭，異步組件和路由懶加載處理使用 import 就可以很輕松實(shí)現(xiàn)。但是在Vue 3.x 中異步組件的使用與 Vue 2.x 完全不同了驮吱。本文就詳細(xì)講講vue3中異步組件和路由懶加載的實(shí)現(xiàn)。
Vue3 異步組件/路由
一、前言
1-1.三點(diǎn)變化：
- 異步組件聲明方法的改變：
Vue 3.x新增一個(gè)輔助函數(shù)defineAsyncComponent腐巢，用來(lái)顯示聲明異步組件 - 異步組件高級(jí)聲明方法中的
component選項(xiàng)更名為loader -
loader綁定的組件加載函數(shù)不再接收resolve和reject參數(shù)，而且必須返回一個(gè)Promise
1-2.引入輔助函數(shù)defineAsyncComponent的原因：
現(xiàn)在玄括，在
Vue 3中冯丙，由于函數(shù)組件被定義為純函數(shù)，異步組件定義需要通過(guò)將其包裝在一個(gè)新的defineAsyncComponent helper中來(lái)顯式定義遭京。
二胃惜、Vue 2.x與Vue 3.x定義比較
2-1.異步組件/路由定義比較
- 2-1-1.在
Vue 2.x中，聲明一個(gè)異步組件只需這樣：
const asyncPage = () => import('./views/home.vue')
- 2-1-2.在
Vue 3.x中哪雕，異步組件的導(dǎo)入需要使用輔助函數(shù)defineAsyncComponent來(lái)進(jìn)行顯式聲明船殉。如下：
<template>
<div>
<h1>Async Components</h1>
<p>異步組件測(cè)試</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中異步組件的聲明有更高級(jí)的聲明方式。如下：
const asyncPageWithOptions = {
component: () => import('./views/home.vue'),
delay: 200,
timeout: 3000,
error: ErrorComponent,
loading: LoadingComponent
}
所以斯嚎，下面的異步組件聲明：
const asyncPage = () => import('./views/home.vue')
等價(jià)于：
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.異步組件加載函數(shù)返回比較
- 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的異步組件加載函數(shù)將不再接收resolve和reject，而且必須始終返回Promise糠惫。也就是說(shuō)幽崩，工廠函數(shù)接收 resolve 回調(diào)的方式定義異步組件在 Vue 3.x 不能使用了。
// 在 Vue 3.x 中不適用
export default {
components: {
asyncPage: resolve => require(['@/components/list.vue'], resolve)
},
}
三寞钥、Vue3實(shí)踐
提示： 如果是用vite工具來(lái)構(gòu)建項(xiàng)目慌申，在本地開(kāi)發(fā)使用import做路由懶加載，可以正常加載理郑，但是會(huì)報(bào)警告蹄溉；打包到生產(chǎn)環(huán)境會(huì)報(bào)錯(cuò)，頁(yè)面不會(huì)正常展示您炉，可以使用以下兩種方法來(lái)實(shí)現(xiàn)柒爵。
3-1.路由懶加載實(shí)現(xiàn)
- 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.上面的方法相當(dāng)于一次性加載了 views 目錄下的所有.vue文件，返回一個(gè)對(duì)象
const modules = import.meta.glob('../views/*/*.vue');
const modules ={
"../views/about/index.vue": () => import("./src/views/about/index.vue")
}
// 2.動(dòng)態(tài)導(dǎo)入的時(shí)候直接赚爵，引用
const router = createRouter({
history: createWebHistory(),
routes: [
// ...
{
path: 'xxxx',
name: 'xxxxx',
// 原來(lái)的方式棉胀，這個(gè)在開(kāi)發(fā)中可行，但是生產(chǎn)中不行
// component: () => import(`../views${menu.file}`),
// 改成下面這樣
component: modules[`../views${filename}`]
}
// ...
],
})
3-2.異步組件實(shí)現(xiàn)
<template>
<div>
<h1>Async Components</h1>
<p>異步組件測(cè)試</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>
四冀膝、總結(jié)
簡(jiǎn)單來(lái)說(shuō)唁奢，寫在
路由配置文件中的異步加載就是路由懶加載的用法，而寫在組件內(nèi)部的異步加載就是異步組件用法窝剖。
《Vue3學(xué)習(xí)與實(shí)戰(zhàn)》系列
- Vue3學(xué)習(xí)與實(shí)戰(zhàn) · 組件通信
- Vue3學(xué)習(xí)與實(shí)戰(zhàn) · 全局掛載使用Axios
- Vue3學(xué)習(xí)與實(shí)戰(zhàn) · 配置使用vue-router路由
- Vue3學(xué)習(xí)與實(shí)戰(zhàn) · Vuex狀態(tài)管理
- vue3 + vite實(shí)現(xiàn)異步組件和路由懶加載（本文）
- Vite+Vue3+Vant快速構(gòu)建項(xiàng)目
歡迎訪問(wèn)：個(gè)人博客地址
