vue3?vite異步組件及路由懶加載實戰(zhàn)示例
更新時間：2022年06月30日 10:47:09 作者：天問
這篇文章主要為大家介紹了vue3?vite異步組件及路由懶加載實戰(zhàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
引言
在 Vue2 中，異步組件和路由懶加載處理使用 import 就可以很輕松實現(xiàn)。但是在Vue 3.x 中異步組件的使用與 Vue 2.x 完全不同了。本文就詳細講講vue3中異步組件和路由懶加載的實現(xiàn)。
Vue3 異步組件/路由
一、前言
1-1.三點變化：
- 異步組件聲明方法的改變：Vue 3.x 新增一個輔助函數(shù)defineAsyncComponent，用來顯示聲明異步組件
- 異步組件高級聲明方法中的 component 選項更名為loader
- loader綁定的組件加載函數(shù)不再接收resolve和reject參數(shù)，而且必須返回一個Promise
1-2.引入輔助函數(shù)defineAsyncComponent的原因：
現(xiàn)在，在 Vue 3 中，由于函數(shù)組件被定義為純函數(shù)，異步組件定義需要通過將其包裝在一個新的 defineAsyncComponent helper 中來顯式定義。
二、Vue 2.x與Vue 3.x定義比較
2-1.異步組件/路由定義比較
- 2-1-1.在 Vue 2.x 中，聲明一個異步組件只需這樣：
const asyncPage = () => import('./views/home.vue')
- 2-1-2.在 Vue 3.x 中，異步組件的導入需要使用輔助函數(shù)defineAsyncComponent來進行顯式聲明。如下：
<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中異步組件的聲明有更高級的聲明方式。如下：
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.異步組件加載函數(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。也就是說，工廠函數(shù)接收 resolve 回調(diào)的方式定義異步組件在 Vue 3.x 不能使用了。
// 在 Vue 3.x 中不適用
export default {
components: {
asyncPage: resolve => require(['@/components/list.vue'], resolve)
},
}
三、Vue3實踐
提示： 如果是用vite工具來構(gòu)建項目，在本地開發(fā)使用import做路由懶加載，可以正常加載，但是會報警告；打包到生產(chǎn)環(huán)境會報錯，頁面不會正常展示，可以使用以下兩種方法來實現(xiàn)。
3-1.路由懶加載實現(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.上面的方法相當于一次性加載了 views 目錄下的所有.vue文件，返回一個對象
const modules = import.meta.glob('../views/*/*.vue');
const modules ={
"../views/about/index.vue": () => import("./src/views/about/index.vue")
}
// 2.動態(tài)導入的時候直接，引用
const router = createRouter({
history: createWebHistory(),
routes: [
// ...
{
path: 'xxxx',
name: 'xxxxx',
// 原來的方式，這個在開發(fā)中可行，但是生產(chǎn)中不行
// component: () => import(`../views${menu.file}`),
// 改成下面這樣
component: modules[`../views${filename}`]
}
// ...
],
})
3-2.異步組件實現(xiàn)
<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>
四、總結(jié)
簡單來說，寫在路由配置文件中的異步加載就是路由懶加載的用法，而寫在組件內(nèi)部的異步加載就是異步組件用法。
以上就是vue3 vite異步組件及路由懶加載實戰(zhàn)示例的詳細內(nèi)容，更多關(guān)于vue3 vite異步組件路由懶加載的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
默認情況下，寫在.vue組件中的樣式會全局生效，因此很容易造成多個組件之間的樣式?jīng)_突問題。導致組件之間樣式?jīng)_突的根本原因，我們接下來探究一下2022-11-11
這篇文章主要介紹了解決elementui表格操作列自適應列寬，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
Vue的route-view子頁面調(diào)用父頁面的函數(shù)詳解
這篇文章主要介紹了Vue的route-view子頁面調(diào)用父頁面的函數(shù)詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
詳解使用vue-cli腳手架初始化Vue項目下的項目結(jié)構(gòu)
這篇文章主要介紹了詳解使用vue-cli腳手架初始化Vue項目下的項目結(jié)構(gòu)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
最近想要學習vue,正好看到資料,如何通過命令創(chuàng)建vue項目的方法,就留個筆記,下面這篇文章主要給大家介紹了關(guān)于vue項目啟動命令的相關(guān)資料,需要的朋友可以參考下2023-02-02
詳解Vue 數(shù)據(jù)更新了但頁面沒有更新的 7 種情況匯總及延伸總結(jié)
這篇文章主要介紹了詳解Vue 數(shù)據(jù)更新了但頁面沒有更新的 7 種情況匯總及延伸總結(jié)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
這篇文章主要介紹了vuex如何修改狀態(tài)state的方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
vue項目Network: unavailable的問題及解決
這篇文章主要介紹了vue項目Network: unavailable的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09
vue項目本地開發(fā)完成后部署到服務器后報404錯誤解決方案
很多時候我們發(fā)現(xiàn)辛辛苦苦寫的VueJs應用經(jīng)過打包后在自己本地搭建的服務器上測試沒有什么問題,但真正放在服務器上后會發(fā)現(xiàn)或多或少的問題,這篇文章主要給大家介紹了關(guān)于vue項目本地開發(fā)完成后部署到服務器后報404錯誤的解決方案,需要的朋友可以參考下2024-01-01
下面小編就為大家分享一篇vue父組件點擊觸發(fā)子組件事件的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02