vue3 vite異步組件及路由懶加載實戰示例
引言
在 Vue2 中,異步組件和路由懶加載處理使用 import 就可以很輕松實現。但是在Vue 3.x 中異步組件的使用與 Vue 2.x 完全不同瞭。本文就詳細講講vue3中異步組件和路由懶加載的實現。
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.異步組件/路由定義比較
- 2-1-1.在 Vue 2.x 中,聲明一個異步組件隻需這樣:
const asyncPage = () => import('./views/home.vue')
- 2-1-2.在 Vue 3.x 中,異步組件的導入需要使用輔助函數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.異步組件加載函數返回比較
- 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) }, }
三、Vue3實踐
提示: 如果是用vite工具來構建項目,在本地開發使用import做路由懶加載,可以正常加載,但是會報警告;打包到生產環境會報錯,頁面不會正常展示,可以使用以下兩種方法來實現。
3-1.路由懶加載實現
- 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}`] } // ... ], })
3-2.異步組件實現
<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>
四、總結
簡單來說,寫在路由配置文件中的異步加載就是路由懶加載的用法,而寫在組件內部的異步加載就是異步組件用法。
以上就是vue3 vite異步組件及路由懶加載實戰示例的詳細內容,更多關於vue3 vite異步組件路由懶加載的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- 一文搞懂Vue3中的異步組件defineAsyncComponentAPI的用法
- vue3 使用defineAsyncComponent與component標簽實現動態渲染組件思路詳解
- 學習Vite的原理
- 用vite搭建vue3應用的實現方法
- vite2.0 踩坑實錄