vue-router を遅延ロードする 3 つの方法のまとめ

遅延読み込みを使用しない

'vue' から Vue をインポートします。
'vue-router' から Router をインポートします。
'@components/HelloWorld' から HelloWorld をインポートします。
Vue.use(ルーター);
デフォルトの新しいルーターをエクスポートします({
ルート:[
	{パス：'。/'、
	名前:'HelloWorld',
	コンポーネント:HelloWorld
	}
]
})

vue 非同期コンポーネント

コンポーネント:resolve=>{reuqire(['ロードするルーティングアドレス']),resolve)

'vue' から Vue をインポートします。
'vue-router' から Router をインポートします。
const HelloWorld=resolve=>{require(["@/components/HelloWorld"],resolve}
Vue.use(ルーター);
デフォルトの新しいルーターをエクスポートします({
ルート:[
	{パス：'。/'、
	名前:'HelloWorld',
	コンポーネント:HelloWorld
	}
]
})

ES6 インポート()

'vue' から Vue をインポートします。
'vue-router' から Router をインポートします。
HelloWorld をインポートします =()=>import('@/components/HelloWorld');
Vue.use('ルーター')
デフォルトの新しいルーターをエクスポートします({
	ルート:[{
	{パス：'。/'、
	名前:'HelloWorld',
	コンポーネント:HelloWorld
	}
	}]
})

webpack の require.ensure()

require.ensure は、js、css などのリソースをオンデマンドで読み込むことができます。必要なファイルは個別にパッケージ化され、メインファイルと一緒にパッケージ化されることはありません。

最初のパラメータは配列であり、2 番目のパラメータに必要なモジュールを示し、事前にロードされます。

2 つ目はコールバック関数です。このコールバック関数では、必要なファイルは別のチャンクにパッケージ化され、メインファイルと一緒にパッケージ化されることはありません。このようにして、2 つのチャンクが生成されます。最初のロードではメインファイルのみがロードされます。

3 番目のパラメータはエラーコールバックです。

4番目のパラメータは、別々にパッケージ化されたチャンクのファイル名です。

'vue' から Vue をインポートします。
'vue-router' から Router をインポートします。
定数HelloWorld=解決=>{
		require.ensure(['@/components/HelloWorld'],()=>{
			解決(require('@/components/HelloWorld'))
		})
	}
Vue.use('ルーター')
デフォルトの新しいルーターをエクスポートします({
	ルート:[{
	{パス：'。/'、
	名前:'HelloWorld',
	コンポーネント:HelloWorld
	}
	}]
})

要約する

これで、vue-router の遅延読み込みの 3 つの方法についての記事は終了です。vue-router の遅延読み込みに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: