Vue Router ではルート マッチングはどのように行われますか?

Vue Router は、Vue.js の公式ルーティング マネージャーです。これにより、シングルページ アプリケーションのページ間の切り替えやジャンプが容易になり、Web アプリケーションのユーザー エクスペリエンスが向上します。 Vue Router の中心的な機能の 1 つはルート マッチングですが、この記事では Vue Router でルート マッチングがどのように行われるかを紹介します。

Vue Router では、ルートのマッチングはルーティング テーブル (Route Table) を通じて行われます。ルーティング テーブルは開発者によって定義され、各ルーティング テーブル項目にはパス、対応するコンポーネント、およびその関連構成が含まれます。 Vue Router インスタンスを作成するとき、ルーティング設定オブジェクトを渡すことでルーティング テーブルを定義できます。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
import NotFound from './components/NotFound.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '*', component: NotFound },
]

const router = new VueRouter({
  routes
})

export default router

上記のコードでは、3 つのルーティング テーブル エントリが定義されています。 { path: '/' } はルート パスを示し、対応するコンポーネントは Home; { path: '/about' } はパスが # であることを示します##/ about、対応するコンポーネントは About; { path: '*' } は他の一致しないパスを表し、対応するコンポーネントは NotFound 。

実行時にユーザーが特定のパスにアクセスすると、Vue Router は現在のパスと照合し、対応するルーティング テーブル エントリを見つけます。 Vue Router は、ハッシュベース (ハッシュ モード) と履歴ベース (履歴モード) の 2 つのマッチング モードを提供します。

ハッシュベースのマッチング モードは、

location.hash の変更を監視することでルート マッチングを実装します。たとえば、ユーザーが /about パスにアクセスすると、location.hash の値は #/about に変更され、Vue Router はそれに基づいて照合します。このハッシュ値、対応するルーティング テーブル エントリ、および対応するコンポーネントをロードします。

履歴ベースのマッチング モードは、HTML5 の History API を使用して、

location.pathname の変更を監視することでルート マッチングを実装します。たとえば、ユーザーがパス /about にアクセスすると、location.pathname の値は /about に変更され、Vue Router は対応するパスと一致します。このパス名に基づいて名前を付け、ルーティング テーブル エントリを作成し、対応するコンポーネントをロードします。

Vue Router は内部でルート マッチング アルゴリズムを実装します。ルーティング パスを

/ に従って分割し、それらを順番に照合します。 Vue Router は、パス セグメントごとに、現在のルーティング テーブル エントリのパス セグメントと一致するかどうかを判断します。

ルート マッチングは動的パラメーターをサポートしており、ルーティング テーブル エントリのパスで動的パラメーターを使用できます。たとえば、

{ path: '/user/:id' } の :id は動的パラメータです。実際のマッチング プロセス中に、パスの id 部分が変更されると、Vue Router は再マッチングし、動的パラメーターの値をコンポーネントに渡します。

Vue Router は、パスの一致に加えて、リダイレクト (Redirect) やエイリアス (Alias) などの他の一致条件もサポートします。これらのマッチング条件を設定することで、ルーティングの動作をより柔軟に制御できます。

要約すると、Vue Router でのルート マッチングはルーティング テーブルを通じて完了します。ルーティング テーブルは開発者によって定義され、各ルーティング テーブル エントリにはパス、対応するコンポーネント、およびそれらの関連構成が含まれます。実行時に、Vue Router は現在のパスと照合し、対応するルーティング テーブル エントリを見つけて、対応するコンポーネントをロードします。ルート マッチングは動的パラメーターをサポートしており、他のマッチング条件を構成することでルートの動作を制御できます。

この記事が、読者が Vue Router のルート マッチング プロセスを理解し、実際のプロジェクトで柔軟に使用できるようになることを願っています。

以上がVue Router ではルート マッチングはどのように行われますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。