ホームページ >ウェブフロントエンド >Vue.js >Vue のルートの遅延読み込みとは何ですか?なぜそうするのでしょうか?

Vue のルートの遅延読み込みとは何ですか?なぜそうするのでしょうか?

青灯夜游
青灯夜游転載
2023-03-06 19:28:442164ブラウズ

vue でのルートの遅延読み込みとは何ですか?なぜルートを遅延読み込みする必要があるのでしょうか?次の記事では、Vue でのルートの遅延読み込みについて説明します。お役に立てば幸いです。

Vue のルートの遅延読み込みとは何ですか?なぜそうするのでしょうか?

#遅延読み込みのルーティング

遅延読み込みの本質は、遅延読み込みまたはオンデマンド読み込みです。つまり、必要な場合の読み込み時間です。

ホームページに遅延読み込みを設定する必要はありません。
一度読み込まれたページは、再度アクセスしても再度読み込まれません。

ルーティングの遅延読み込みが必要な理由

    #アプリケーションをパッケージ化して構築する場合、パッケージ化されたコード ロジック実装パッケージが非常に大きくなることがあります。ユーザーがそれを使用したい場合は、すべてのリソースが要求されます。
  • 異なるルートに対応するコンポーネントを個別にパッケージ化し、ルートにアクセスするときにそれらをロードすると、より効率的になります。 [関連する推奨事項:
  • vuejs ビデオ チュートリアル

    Web フロントエンド開発 ]

ルーティング遅延読み込みの機能

    ルートに対応するコンポーネントを対応する js パッケージにロードします。
  • 対応するコンポーネントは、ルートにアクセスした場合にのみロードされます。

#vue 非同期コンポーネント構文:component:resolve=> (require(['ロードする必要があるルートのアドレス']),solve)

#
// 官方文档:https://vue3js.cn/router4/guide/#html
// 引入vue-router对象
import { createRouter, createWebHistory, createWebHashHistory, ErrorHandler } from "vue-router";
/**
 * 定义路由数组
 */
const routes = [
  {// 404路由
    path: '/404',
    name: '404',
    component: resolve=>(require(["/@/views/404.vue"],resolve))
  },
];
 
/**
 * 创建路由
 */
const router = createRouter({
  history: createWebHistory("/"),
  routes,
});
/**
 * 输出对象
 */
export default router;

#ES import よく使われる

ユーザーがコンポーネントにアクセスすると、アロー関数が実行されます。 webpack: import 動的インポート構文は、ファイルを個別にパッケージ化できます。 構文: const xxx = () => import('モジュールアドレスをロードする必要があります')

// 官方文档:https://vue3js.cn/router4/guide/#html
// 引入vue-router对象
import { createRouter, createWebHistory, createWebHashHistory, ErrorHandler } from "vue-router";
/**
 * 定义路由数组
 */
const routes = [
  {// 404路由
    path: '/404',
    name: '404',
    component: ()=>import('/@/views/404.vue')
  },
];
 
/**
 * 创建路由
 */
const router = createRouter({
  history: createWebHistory("/"),
  routes,
});
/**
 * 输出对象
 */
export default router;

(学習ビデオ共有:
vuejs 入門チュートリアル 基本プログラミング ビデオ

)

以上がVue のルートの遅延読み込みとは何ですか?なぜそうするのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。