今回は vue-router 遅延ロードについて詳しく説明します (コード付き)。vue-router 遅延ロードを使用する際の 注意事項 は何ですか? ここで実際のケースを見てみましょう。
vue-router を使用したことのある人なら誰でも、vue-router がモジュール js の遅延読み込みを実装できることを知っています。つまり、ホームページの表示を高速化するために、必要なときに対応するモジュールの js スクリプト ファイルのみを読み込みます。たとえば、ユーザーが初めて特定の「ユーザー情報」ボタンまたはメニューをクリックしたときのみ、ダウンロードが行われます 今回は、次のような実際的なケースを紹介します。一見。 「ユーザー情報」モジュールのjsコンポーネントを読み込みます。 遅延読み込みの実装は、webpack の AMD モードの関数requirefunction に依存します。 Webpack は、非同期の require ファイルから独立した js ファイルを生成します。呼び出し時には、js が非同期的にダウンロードされ、完了後に実行されます。開発プロジェクトに実装された主要なコードは次のとおりです:
const basicInfo = { path: '/user', component: resolve => require(['./basicInfo.vue'], resolve) } //然后将这个basicInfo加入路由表中
resolve => require(['./basicInfo.vue'], resolve)
const basicInfo = { path: '/user', component: resolve => { [显示Loading] require(['./basicInfo.vue'], component => { [隐藏Loading] resolve(component) }) } };
import { Loading } from 'element-ui'; var unique; export default { show() { let opt = {body: true, text: 'Loading...'}; if(!unique) unique = Loading.service(opt); }, resolve(resolve) { return function (component) { if (unique) { unique.close(); unique = null; } resolve(component) } } } const basicInfo = { path: '/user', component: resolve => { spinRoute.show(); require(['./basicInfo.vue'], spinRoute.resolve(resolve)) } };
vue-cli 3.0をアップグレードする方法 初心者が知っておくべきこと
以上がvue-routerの遅延読み込みの詳しい説明(コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。