ホームページ > 記事 > ウェブフロントエンド > vue3 vite 非同期コンポーネントとルーティングの遅延読み込みを適用する方法
非同期コンポーネント宣言メソッドの変更: Vue 3.x では、新しい補助関数defineAsyncComponent が追加されています。非同期コンポーネントの宣言を表示するために使用されます
非同期コンポーネントの詳細宣言メソッドのコンポーネント オプションの名前がloaderに変更されました
コンポーネントの読み込みローダーによってバインドされた関数は、解決パラメータと拒否パラメータを受け取りません。そして、Promise
Now , Vue 3 では、コンポーネントは純粋な関数として定義される関数のため、非同期コンポーネントの定義は新しいdefineAsyncComponent ヘルパーでラップすることによって明示的に定義する必要があります。
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>2-2. 宣言方法の比較
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') }
const asyncPageWithOptions = defineAsyncComponent({ loader: () => import('./views/home.vue'), delay: 200, timeout: 3000, error: ErrorComponent, loading: LoadingComponent })2-3. 非同期コンポーネント読み込み関数は比較を返します
// 2.x version const oldAsyncComponent = (resolve, reject) => { /* ... */ }
// 3.x version const asyncComponent = defineAsyncComponent( () => new Promise((resolve, reject) => { /* ... */ }) )Vue 3.x の非同期コンポーネント読み込み関数は、解決と拒否を受け取らなくなり、常に Promise を返す必要があります。つまり、Vue 3.x では、ファクトリ関数を介して解決コールバックを受信して非同期コンポーネントを定義することはサポートされなくなりました。
// 在 Vue 3.x 中不适用 export default { components: { asyncPage: resolve => require(['@/components/list.vue'], resolve) }, }3. Vue3 の実践 ヒント: Vite ツールを使用してプロジェクトをビルドする場合は、インポートを使用して、ローカル開発中にルーティング遅延ロードを実行します。正常にロードできますが、警告が表示されます。報告される; 本番環境にパッケージ化する 環境によってエラーが報告され、ページが正常に表示されなくなります。これを実現するには、次の 2 つの方法を使用できます。 3-1. ルーティング遅延読み込みの実装
// 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'), } ];
// 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> <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 非同期コンポーネントとルーティングの遅延読み込みを適用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。