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のアクセス制限設定の詳細な説明

推薦する

SSHのssh-keygenコマンドの基本的な使い方の詳細な説明

SSH 公開鍵認証は、SSH 認証方式の 1 つです。 SSH パスワードフリーのログインは公開鍵認...

Vue.jsはカレンダー機能を実装します

この記事では、カレンダー機能を実装するためのVue.jsの具体的なコードを例として紹介します。具体的...

新しい Linux ファイル権限設定における umask の詳細な理解

序文起源は質問 1 です: umask が 022 に設定されている場合、作成するファイルのデフォル...

MySQL テーブルがロックされているかどうかを照会する方法

具体的な方法: (推奨チュートリアル:MySQLデータベース学習チュートリアル)テーブルロックの状態...

Nginx URL 書き換えメカニズムの原理と使用例

URL 書き換えは、Web サイトの優先ドメインを決定するのに役立ちます。同じリソース ページの複数...

mysqlパラメータsql_safe_updatesを使用して更新/削除範囲を制限する方法の詳細な説明

序文皆さんご存知のとおり、MySQL の運用・保守において、更新/削除条件が誤っているためにデータが...

Docker を使用して MySQL および Redis サービスをデプロイする方法

目次Dockerを使用してMySQLサービスをデプロイする方法DockerでRedisサービスをデプ...

CSSポジションの5つの異なる値の使い方の詳細な説明

位置プロパティposition プロパティは、要素に使用する配置方法のタイプ (静的、相対的、固定、...

Vueは画像のズームとドラッグをサポートするリッチテキストエディタを統合しています

必要:ビジネス要件によると、写真をアップロードできる必要があり、アップロードされた写真はモバイル端末...

Echarts バー水平棒グラフのサンプルコード

目次横棒グラフデータとスタイルを動的に更新するeChartsの幅と高さの適応の問題を解決する縦棒グラ...

JavaScript イベント委任の原則

目次1. イベント委任とは何ですか? 2. イベント委任の原則3. イベント委託の役割1. イベント...

Dockerコンテナとホストマシン間の8時間の差の問題を解決する

デプロイに docker-compose を使用すると、出力ログと関連イベントが検証されて出力される...

JS の効率的なマジック演算子の概要

JavaScript は現在、毎年新しいバージョンがリリースされており、より便利で効率的な新しい演算...

Websocket に基づくシンプルなチャットルームダイアログの実装

この記事では、WebSocketを使用して簡単なチャットルームの会話を実装するための具体的なコードを...

CentOS7にMariaDB 10.2.4をインストールする方法の詳細な説明

CentOS 6 以前のバージョンでは、MySQL サーバー/クライアント インストール パッケージ...