Vue Router ではナビゲーションの解析とマッチングはどのように機能しますか?

Vue Router は Vue.js が公式に提供するプラグインで、フロントエンドのルーティング機能を実装するために使用されます。これは、シングルページ アプリケーション (SPA) を迅速に構築し、ページ間のジャンプやナビゲーションを実現するのに役立ちます。 Vue Router において、ナビゲーションの解析とマッチングは非常に重要なリンクですが、Vue Router でナビゲーションの解析とマッチングがどのように行われるかを詳しく紹介します。

ナビゲーション解析とマッチングの原則

Vue Router では、ナビゲーション解析とマッチングには主に 2 つのステップが含まれます。 まず、ブラウザのアドレス バーに従って URL を解析して抽出します。 パスやパスなどの情報を抽出します。パラメータを取得し、抽出した情報をルーティング設定と照合して、レンダリングするコンポーネントを決定します。

Vue Router では、ナビゲーションの解析とマッチングの中核は VueRouter.prototype.match メソッドです。このメソッドは、RAW ルート オブジェクト (つまり、アプリケーション内の特定のパスとレンダリングされるコンポーネント情報を記述するために使用されるオブジェクト) を受け取り、現在の URL に一致するルート レコード (つまり、パス一致ルールを含むルート レコード) を返します。 、コンポーネントなどのオブジェクト）。以下は簡単な例です:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

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

上の例では、Vue.use(VueRouter) を通じてプラグインをインストールし、routes# という名前のルートを定義します。 # #Array では、配列内の各オブジェクトは、パス path と対応するコンポーネント component を含むルーティング構成を表します。次に、Vue Router インスタンスを作成し、これらのルーティング設定をそれに渡します。最後に、この Vue Router インスタンスを router オプションとして Vue インスタンスに渡してマウントします。

ナビゲーション解析のプロセス

アプリケーション内でナビゲートすると、Vue Router はまず URL を解析し、パス、パラメーター、その他の情報を取得します。この解析プロセスは自動的にトリガーされるため、Vue Router インスタンスを Vue インスタンスの

router オプションとしてマウントするだけで済みます。

URL を解析するプロセスで、Vue Router はブラウザのネイティブ API を使用して URL を取得します。ブラウザが

history.pushState API をサポートしている場合、window.location.pathname を使用して URL パスが取得されます。ブラウザが history.pushState をサポートしていない場合は、history.pushState #、次に window.location.hash

を使用して URL パスを取得します。

ルート マッチング プロセス

URL を解析した後、Vue Router は解析されたパス上でルート マッチングを実行します。ルート マッチングは、VueRouter.prototype.match

メソッドを通じて実装されます。

ルート照合プロセス中に、Vue Router はルーティング設定配列 routes

を走査し、その中の各ルーティング設定を照合します。照合プロセスはパスに基づいて行われます。Vue Router は、定義されたパス ルールに従って、解析された URL パスと照合します。照合が成功すると、ルーティング設定に対応するコンポーネントが返されます。すべてのルーティング設定が正常に一致しない場合は、空のルーティング レコードが返されます。

ルーティングパラメータのマッチング

ルーティングマッチングの過程で、定義されたパスルールにパラメータが含まれている場合、Vue Router は解析されたパス内のパラメータ値をコンポーネントとして抽出し、プロパティが渡されます。対応するコンポーネントに。

たとえば、パス ルールを /user/:id として定義すると、これはユーザーの詳細ページを表し、:id はユーザーの ID を表します。 this.$route.params.id

を通じてこの ID 値を取得できます。

概要

Vue Router でのナビゲーションの解析と照合は、URL を解析し、それをルーティング設定と照合することによって実現されます。 URL の解析プロセス中に、Vue Router はブラウザのアドレス バーにある URL を自動的に取得し、定義されたルーティング設定に従って URL を照合して、レンダリングするコンポーネントを決定します。このうち、パスマッチングはパスに基づいて行われ、パスにパラメータが含まれている場合には、そのパラメータが対応するコンポーネントに渡されます。

Vue Router のナビゲーション解析およびマッチング機能は非常に強力かつ柔軟で、さまざまなフロントエンド ルーティングのニーズを満たすことができます。合理的な利用と柔軟なアプリケーションを通じて、複雑で保守可能な単一ページ アプリケーションを構築できます。 ###

以上がVue Router ではナビゲーションの解析とマッチングはどのように機能しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。