ホームページ > 記事 > ウェブフロントエンド > 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 。
location.hash の変更を監視することでルート マッチングを実装します。たとえば、ユーザーが
/about パスにアクセスすると、
location.hash の値は
#/about に変更され、Vue Router はそれに基づいて照合します。このハッシュ値、対応するルーティング テーブル エントリ、および対応するコンポーネントをロードします。
location.pathname の変更を監視することでルート マッチングを実装します。たとえば、ユーザーがパス
/about にアクセスすると、
location.pathname の値は
/about に変更され、Vue Router は対応するパスと一致します。このパス名に基づいて名前を付け、ルーティング テーブル エントリを作成し、対応するコンポーネントをロードします。
/ に従って分割し、それらを順番に照合します。 Vue Router は、パス セグメントごとに、現在のルーティング テーブル エントリのパス セグメントと一致するかどうかを判断します。
{ path: '/user/:id' } の
:id は動的パラメータです。実際のマッチング プロセス中に、パスの
id 部分が変更されると、Vue Router は再マッチングし、動的パラメーターの値をコンポーネントに渡します。
以上がVue Router ではルート マッチングはどのように行われますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。