Vue-router ネストルーティングの詳細な説明

Vue-router ネストルーティングの詳細な説明

ステップ

1. ルーティング ルールを設定し、子構成項目を使用します。

ルート:[
	{
		パス:'/about',
		コンポーネント:について、
	},
	{
		パス:'/home',
		コンポーネント:ホーム、
		children:[ //children を通じて子ルーティングを構成する {
				パス:'news', // 書き込まないでください: /news
				コンポーネント:ニュース
			},
			{
				パス:'message', //書き込まないでください: /message
				コンポーネント:メッセージ
			}
		]
	}
]

2. ジャンプ(フルパスを記入):

   <router-link to="/home/news">ニュース</router-link>

コードの分析

ここに画像の説明を挿入

ここに画像の説明を挿入

ここに画像の説明を挿入

ここに画像の説明を挿入

ここに画像の説明を挿入

ここに画像の説明を挿入

ここに画像の説明を挿入

ここに画像の説明を挿入

ここに画像の説明を挿入

ここに画像の説明を挿入

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • vue3+TypeScript+vue-routerの使い方
  • vue-router 4 の使用例の詳しい説明
  • Vue-Routerのルート設定の詳しい説明
  • バックエンドの権限に基づいてナビゲーション メニューを動的に生成する Vue-router のサンプル コード
  • Vue-Routerのインストールプロセスと原理の詳細
  • 非常に詳細な Vue-Router のステップバイステップのチュートリアル
  • Vue-Routerのインストールと使用方法の詳細な説明
  • vue3 で vue-router を使用するための完全な手順
  • Vue ルーター vue-router 詳細説明ガイド
  • Vue-routerルーティングの使い方
  • Vue ルーティング vue-router の使用方法の説明

<<:  MySQLとNavicatプレミアムのインストールと設定の詳細な手順

>>:  Linuxカーネルスケジューラソースコード初期化の分析

推薦する

HTML TextArea でのフォーマット保存の問題の解決方法

textarea の形式は保存時にデータベースに保存できますが、表示時には /n と相互に変換できな...

Vue-Routerのインストールと使用方法の詳細な説明

目次インストールルーティングの基本構成Vue にルーターをインストールするルーターの設定Router...

2019 年に最も役立ち重要なオープンソース ツール トップ 10

Black Duck の 2017 年のオープンソース調査では、回答者の 77% がオープンソース...

CocosCreator Huarongdaoデジタルパズルの詳しい説明

目次序文文章1. パネル2. 華容島ソリューション3. コード4. 注記序文華容路とは何ですか? 誰...

Vue での props の使い方の紹介

序文: Vue では、props を使用して、もともと分離されていたコンポーネントを直列に接続するこ...

Linux は、Deepin がルートユーザーとして Google Chrome ブラウザを起動できない問題を解決します

Deepin がルートユーザーとして Google Chrome ブラウザを起動できない問題を解決す...

VMware15 の Deepin インストール詳細チュートリアル (画像とテキスト)

序文Deepin のユーザー インターフェイスは、使用時に非常に見栄えがします。インターフェイス効果...

シンプルな時計を実装するJavaScript

この記事では、JavaScriptでシンプルな時計を実装するための具体的なコードを参考までに紹介しま...

Samba を使用して Linux サーバー上で共有ファイル サービスを構築する方法

最近、私たちの小さなチームは、サーバー上の共有フォルダーを共有して、全員がパブリックリソースドキュメ...

docker-compose でデプロイしたときに MySQL にアクセスできなくなる問題の簡単な分析

Docker-ComposeとはCompose プロジェクトは、以前の fig プロジェクトから派生...

ネイティブjsはショッピングカートのロジックと機能を実装します

この記事の例では、ショッピングカートのロジックと機能を実装するためのjsの具体的なコードを共有してい...

js+ca​​nvas でコードレイン効果を実現

この記事では、js+ca​​nvasコードの雨効果の具体的なコードを参考までに共有します。具体的な内...

MySQLデータベースの圧縮バージョンのインストールと設定に関する詳細なチュートリアル

目次1. MySQLをダウンロードする2. 圧縮パッケージを解凍する3. MySQLを初期化する4....

私のCSSアーキテクチャのコンセプト - それは人によって異なり、ベストなものはなく、適切なものだけがある

はじめに<br />私はフロントエンド分野でかなり長い間働いており、CSS分野でも長い間...