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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vueルーターはパラメータを渡し、ページを更新するときにパラメータが失われる問題を解決します
  • Vue-routerルーティングの使い方
  • Vue-router プログラムナビゲーションの 2 つの実装コード
  • Vue-router ルーティングの遅延読み込みとそれを実装する 3 つの方法
  • Vue-routerのハッシュモードと履歴モードの違いの詳細な説明
  • vue-routerはメタ情報メタ操作を定義します
  • Vue ルーターのインストールと使用状況の分析
  • vue3.0+vue-router+element-plusの初期練習
  • Vue ルーターにパラメータを渡すときにページを更新するとパラメータが失われる問題に対処する方法

<<:  MySQL 5.7 でデータベースのデータ保存場所を変更する方法

>>:  Nginxのアクセス制限設定の詳細な説明

推薦する

VMware 仮想マシンで Linux の IP アドレスを表示する方法

1. まず、コンピュータのデスクトップにある VMware アイコンをダブルクリックしてソフトウェア...

Node.js コンソールで強調表示されたコードを印刷する方法

序文コードを実行してエラーが発生すると、エラーが出力されます。エラーにはスタック情報が含まれており、...

HTML サブタグと sup タグ

今日はあまり使わないHTMLタグ「subタグ」と「supタグ」を紹介します。定義と使用法: <...

キャンバスはスクラッチカード効果を描画します

この記事では、キャンバスでスクラッチカード効果を描画するための具体的なコードを参考までに共有します。...

ウェブサイトのビジュアルデザイン(画像とテキスト)における情報伝達の役割と方法

現代の Web ビジュアル デザインは、初期の情報の積み重ねから、その後のグラフィックスと抽象化、そ...

MySQL デッドロックのトラブルシューティングの全プロセス記録

【著者】 Liu Bo: Ctrip テクニカル サポート センターのシニア データベース マネージ...

JavaScript 文字列の一般的なメソッドの詳細な説明

目次1. キャラクター文法パラメータ索引戻り値2. 連結文法パラメータ文字列2 [, …文字列N]戻...

W3C チュートリアル (4): W3C XHTML アクティビティ

HTML は、World Wide Web 上で公開するために使用されるハイブリッド言語です。 XH...

Docker で Selenium グリッド分散環境を構築する実用的な方法

最近、Zoom ビデオ会議をテストし、100 人が同時に会議に参加することをシミュレートする必要があ...

シングルサインオン制御を実装するためのVueの完全なコード

参考までに、Vue シングル サインオンのデモをご紹介します。詳細を知りたい方のお役に立てれば幸いで...

vue-element-admin グローバル読み込み待機中

最近の要件:グローバルロード、すべてのインターフェースはロード待機機能を表示するかどうかを手動で制御...

JS 非同期実行の原則とコールバックの詳細

1. JSの非同期実行の原則JavaScript はシングルスレッドですが、ブラウザはマルチスレッド...

docker エントリポイントファイルの詳細な説明

Dockerfile を作成するときは、コンテナが起動する前に初期化構成やカスタム構成を実行するため...

MySQLクエリ最適化に必須の知識ポイントのまとめ

序文クエリの最適化は一夜にして達成できるものではありません。対応するツールの使い方を学び、他の人の経...

MySQL外部キーの基本的な機能と使用方法の詳細な説明

この記事では、例を使用して、MySQL 外部キーの基本的な機能と使用方法を説明します。ご参考までに、...