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カーネルスケジューラソースコード初期化の分析

推薦する

mysqlは複数の主キーを設定する操作を実装します

ユーザーテーブル、ID番号は一意である必要があります、携帯電話番号、電子メールアドレスは一意である必...

Vue+express+Socketでチャット機能を実現

この記事では、チャット機能を実現するためのVue+express+Socketの具体的なコードを参考...

Alibaba Cloud ホストが IP を使用して Web サイトにアクセスできない問題の解決策 (セキュリティ グループ ルールを構成することで解決)

Alibaba Cloud ホストを購入したばかりで、その速度を試すのが待ちきれませんでした。しか...

フローティングをクリアするいくつかの方法(推奨)

1. 同じタイプの空の要素を追加し、要素の CSS 属性 clear:both; を設定します。 ...

MySQL データベースのインデックスとトランザクション

目次1. 索引1.1 コンセプト1.2 機能1.3 索引作成の原則1.3.1 ディスクアクセス回数を...

背景画像の配置におけるbackground-position属性の自己理解

最近、プロジェクトではラベルやボタンなどの断片的な画像をたくさん使用する必要があります。また、CSS...

@font-face を使用して Web ページに特殊文字を実装する (カスタム フォントを作成する)

数日前、CSS を使用して三角形の矢印を実装する方法について記事を書きました。 目的の効果は達成され...

MySQLデータ移行方法とツールの分析

この記事は主にMySQLデータ移行方法とツールの分析を紹介します。サンプルコードを通じて詳細に紹介さ...

jQueryは時間セレクタを実装する

この記事の例では、参考までに時間セレクターを実装するためのjQueryの具体的なコードを共有していま...

js でパズルゲームを実装する

この記事では、パズルゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な内容は...

Deepin で virtualenv をインストールして使用するチュートリアル

virtualenv は、分離された Python 仮想環境を作成するためのツールです。独立したディ...

ウェブタイポグラフィにおける致命的な意味的ミス 10 選

<br />これは、Steven D が書いた Web フロントエンド開発デザインの基本...

Linuxでのaliasコマンドの使い方の詳細な説明

1. 別名の使用alias コマンドは、コマンドのエイリアスを設定するために使用されます。このコマン...

Excel ファイルを MySQL データベースにインポートする方法

この記事では、ExcelファイルをMySQLデータベースにインポートする方法を参考までに紹介します。...

Linuxにおけるumaskコマンドの使用原理と計算方法の詳しい解説

目次umask umaskの使用法原理1. umask値2. ファイルディレクトリの最大権限3. 従...