プロジェクト開発に Vue を使用すると、コンポーネントを非同期でロードする必要がある状況に遭遇することがあります。たとえば、場合によっては、特定のルートでコンポーネントをロードするだけでよい場合や、ユーザーが特定のアクションを実行した後にのみコンポーネントをロードする必要がある場合があります。この記事では、コンポーネントの非同期読み込みを解決するいくつかの方法を紹介します。
Vue の非同期コンポーネント読み込みメソッドの使用
Vue は、コンポーネントを使用する必要があるときに読み込むことができる、コンポーネントを非同期に読み込む方法を提供します。 Vue の import()
構文を使用して、非同期読み込みを実装できます。例:
const MyComponent = () => import('./MyComponent.vue')
この方法では、MyComponent## を使用する必要がある場合にのみ非同期読み込みが発生します。 # 成分。 。ルーティングでコンポーネントの非同期ロードを使用する方法は次のとおりです。
const router = new VueRouter({ routes: [ { path: '/home', component: () => import('./Home.vue') } ] })
/home## にアクセスすると、Home
コンポーネントが非同期でロードされます。 # パス。
@babel/plugin-syntax-dynamic-import
プラグインを使用して、遅延読み込みをサポートできます。例: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>const MyComponent = () => import(/* webpackChunkName: "my-component" */ './MyComponent.vue')</pre><div class="contentsignin">ログイン後にコピー</div></div>
このように、## を使用する必要がある場合は、 #MyComponent
const router = new VueRouter({ routes: [ { path: '/home', component: () => import(/* webpackChunkName: "home" */ './Home.vue') } ] })
Vue の遅延読み込みメソッドを使用すると、コンポーネントの読み込みタイミングをより詳細に制御できます。
Vue の遷移コンポーネントを使用して非同期読み込みを行う コンポーネントを使用して、非同期に読み込まれたコンポーネントをラップし、読み込みが完了した後にコンポーネントを表示できます。たとえば、
<transition> <keep-alive> <component :is="currentComponent"></component> </keep-alive> </transition>
は
data# で定義されています。 Vue の ## オプション currentComponent 変数、非同期ロードが必要なコンポーネントに応じてこの変数を切り替えることでコンポーネントの動的なロードを実現できます。 概要:
以上がVue 開発におけるコンポーネントの非同期読み込みの問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。