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 サイトの他の関連記事を参照してください。

この記事では、Vue.jsコンポーネントのエクスポートデフォルトの役割を明確にし、ライフサイクルフックを構成するのではなく、エクスポートのみのためであることを強調しています。 ライフサイクルフックは、コンポーネントのオプションオブジェクト内のメソッドとして定義されます。

この記事では、エクスポートのデフォルトを使用するときにVUE.JSコンポーネントウォッチ機能を明確にします。 プロパティ固有の監視、賢明な深いオプションの使用、および最適化されたハンドラー機能を通じて、効率的な時計の使用を強調しています。 ベストプラクティス

この記事では、vue.jsの州管理図書館であるVuexについて説明します。 コアの概念(状態、ゲッター、突然変異、行動)を詳述し、使用法を示し、より単純な代替案よりも大きなプロジェクトの利点を強調します。 デバッグと構造化

記事では、開発、統合、メンテナンスのベストプラクティスなど、カスタムVue.jsプラグインの作成と使用について説明します。

VUE.JSは、コンポーネントベースのアーキテクチャ、パフォーマンスのための仮想DOM、およびリアルタイムのUI更新用のリアクティブデータバインディングでWeb開発を強化します。

この記事では、高度なVueルーターのテクニックを調べます。 動的なルーティング(パラメーターを使用)、階層ナビゲーション用のネストされたルート、およびアクセスとデータフェッチを制御するためのルートガードをカバーします。 複雑なルート社を管理するためのベストプラクティス

この記事では、さまざまなビルドターゲットにVue CLIを構成し、環境を切り替え、生産ビルドを最適化し、デバッグ用のソースマップを確保する方法について説明します。

この記事では、VUEを使用してDockerを展開するために説明し、コンテナ内のVUEアプリケーションのセットアップ、最適化、管理、およびパフォーマンス監視に焦点を当てています。


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール
