Vue-Router を使用して Vue アプリケーションにルートの遅延読み込みを実装するにはどうすればよいですか?

Vue アプリケーションでは、Vue-Router を使用してルートの遅延読み込みを実装すると、アプリケーションのパフォーマンスを大幅に向上させることができます。ルーティング遅延読み込みを使用すると、一部のコードとコンポーネントを必要なときにのみ読み込むことができるため、アプリケーションの先頭ですべてを読み込む必要がなくなり、アプリケーションの読み込み時間が短縮され、ユーザー エクスペリエンスが向上します。

Vue-Router は、アプリケーションのルーティング機能を実装できる Vue.js の公式ルーティング マネージャーです。 Vue で Vue-Router を使用してルートの遅延読み込みを実装するには、Webpack のコード分割機能を使用する必要があります。この記事では、Vue-Router を使用して Vue アプリケーションでルートの遅延読み込みを実装する方法を紹介し、具体的なコード例を示します。

ステップ 1: Vue-Router をインストールする

Vue-Router を使用してルートの遅延読み込みを実装するには、まず Vue-Router をインストールする必要があります。 npm を使用して Vue-Router をインストールします:

npm install vue-router --save

ステップ 2: Vue インスタンスを作成します

Vue インスタンスのルーター オプションで、ルーティング遅延読み込みを使用します:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const Foo = () => import('./Foo.vue')
const Bar = () => import('./Bar.vue')

const router = new Router({
  routes: [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ]
})

new Vue({
  router
}).$mount('#app')

In上記のコードでは、import() 関数を使用して Foo コンポーネントと Bar コンポーネントをインポートし、const を使用してそれらを変数に割り当てます。ここでの import() 関数は、Webpack によって提供される動的インポート メソッドであり、コンポーネントごとに個別のブロックを作成できます。 Vue インスタンスのルーター オプションでは、インポートされたコンポーネントを直接使用します。

ステップ 3: ルーティングの遅延読み込みのオプション設定

コード分割にデフォルトの Webpack 設定を使用することに加えて、Vue-Router は開発者がより詳細に制御できるようにするためのいくつかのオプション設定も提供します。遅延読み込みの効率が向上します。

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')

const router = new Router({
  routes: [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ],
  mode: 'history',
  fallback: true,
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  },
  base: process.env.BASE_URL,
  linkActiveClass: 'active',
  linkExactActiveClass: 'exact-active',
  beforeEach: (to, from, next) => {},
  afterEach: (to, from) => {}
})

• webpackChunkName: コンポーネントの名前を指定すると、Webpack はその名前に基づいてチャンクごとにチャンクを作成します。 2 つのコンポーネントが同じ名前を使用する場合、それらを同じブロックに配置できるため、遅延読み込み時間がさらに短縮されます。
• mode: HTML5 履歴モードを使用します。これにはサーバーのサポートが必要です。
• fallback: ブラウザーが HTML5 履歴モードをサポートしていない場合、このオプションはハッシュ モードにフォールバックするかどうかを指定します。
• scrollBehavior: ページにジャンプするときのスクロール動作に使用されます。
• base: 基本 URL。たとえば、vue-router を使用する場合、アプリケーションをサブディレクトリにデプロイする場合は、base オプションを使用してディレクトリを指定します。
• linkActiveClass: アクティブなリンクの CSS クラス名を指定します。
• linkExactActiveClass: アクティベーション リンクと正確に一致する CSS クラス名を指定します。
• beforeEach: グローバル ルーティング ガード。ルーティング変更フックの前に登録できます。
• afterEach: グローバル ルーティング ガード。ルーティング変更フックの後に登録できます。

概要

Vue アプリケーションで Vue-Router を使用してルートの遅延読み込みを実装すると、アプリケーションのパフォーマンスを大幅に向上させることができます。 Webpack のコード分割機能を使用して、遅延読み込みを実現できます。 Vue-Router の import() 関数を使用してコンポーネントをインポートし、const を使用して変数に代入し、インポートされたコンポーネントをルーティング オプションで使用します。同時に、Vue-Router はいくつかのオプション構成も提供します。これは、開発者がコード分割をより詳細に制御し、遅延読み込みの効率を向上させるのに役立ちます。

以上がVue-Router を使用して Vue アプリケーションにルートの遅延読み込みを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。