Heim > Artikel > Web-Frontend > So wenden Sie Lazy Loading von asynchronen Vue3-Vite-Komponenten und Routing an
Änderungen in der Deklarationsmethode für asynchrone Komponenten: Vue 3.x fügt eine neue Hilfsfunktion defineAsyncComponent hinzu, um die Deklaration asynchroner Komponenten anzuzeigen Die Komponentenoption in der Methode wird in Loader umbenannt. Die vom Loader gebundene Komponentenladefunktion empfängt keine Auflösungs- und Ablehnungsparameter mehr und muss ein Promise zurückgeben. 1-2 Der Grund für die Einführung der Hilfsfunktion defineAsyncComponent :
2. Vergleich von Vue 2.x- und Vue 3.x-Definitionen
const asyncPage = () => import('./views/home.vue')
<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>
const asyncPageWithOptions = { component: () => import('./views/home.vue'), delay: 200, timeout: 3000, error: ErrorComponent, loading: LoadingComponent }
Die folgende asynchrone Komponentendeklaration:
const asyncPage = () => import('./views/home.vue')
const asyncPageWithOptions = { component: () => import('./views/home.vue') }
const asyncPageWithOptions = defineAsyncComponent({ loader: () => import('./views/home.vue'), delay: 200, timeout: 3000, error: ErrorComponent, loading: LoadingComponent })
2-3-1. Erhalten Sie Auflösung und Ablehnung in Vue 2.x:
// 2.x version const oldAsyncComponent = (resolve, reject) => { /* ... */ }
// 3.x version const asyncComponent = defineAsyncComponent( () => new Promise((resolve, reject) => { /* ... */ }) )
// 在 Vue 3.x 中不适用 export default { components: { asyncPage: resolve => require(['@/components/list.vue'], resolve) }, }
3. Vue3-Übungen
// 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-Methode
// 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>
Das obige ist der detaillierte Inhalt vonSo wenden Sie Lazy Loading von asynchronen Vue3-Vite-Komponenten und Routing an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!