Vue-routerルーティングの使い方

Vue-routerルーティングの使い方

1. 説明

Vue Router は、Vue.js の公式ルーティング マネージャーです。 Vue.js のコアと深く統合されているため、シングルページ アプリケーションを簡単に構築できます。含まれる機能は次のとおりです:

  • ネストされたルート/ビューテーブル
  • モジュール式のコンポーネントベースのルーティング構成
  • ルートパラメータ、クエリ、ワイルドカード
  • Vue js トランジションシステムに基づくビュートランジション効果
  • きめ細かなナビゲーションコントロール
  • 自動的にアクティブ化された CSS クラスを持つリンク
  • HTML5 履歴モードまたはハッシュモード、IE 9 での自動ダウングレード
  • カスタムスクロール動作

2. インストール

最初の vue-cli に基づいてテストと学習を行います。まず、ノード モジュールに vue-router が存在するかどうかを確認します。
vue-router はプラグイン パッケージなので、インストールするには npm/cnpm を使用する必要があります。コマンドライン ツールを開き、プロジェクト ディレクトリに移動して、次のコマンドを入力します。

npm で vue-router をインストールします --save-dev

モジュール プロジェクトで使用する場合は、Vue.use() を介してルーティング機能を明示的にインストールする必要があります。

'vue' から Vue をインポートします
'vue-router' から VueRouter をインポートします。

Vue.use(VueRouter);

3. テスト

1. まず不要なものを削除する
2. 自分で書いたコンポーネントはコンポーネントディレクトリに保存されます
3. Content.vueコンポーネントを定義する

<テンプレート>
	<div>
		<h1>目次ページ</h1>
	</div>
</テンプレート>

<スクリプト>
	エクスポートデフォルト{
		名前:"コンテンツ"
	}
</スクリプト>

Main.vue コンポーネント

<テンプレート>
	<div>
		<h1>ホーム</h1>
	</div>
</テンプレート>

<スクリプト>
	エクスポートデフォルト{
		名前:"メイン"
	}
</スクリプト>

4. ルーターをインストールします。srcディレクトリに、ルーターを保存するための新しいフォルダーrouterを作成し、ルーターのindex.jsを次のように設定します。

'vue' から Vue をインポートします
//ルーティングプラグインをインポートする import Router from 'vue-router'
//上記で定義したコンポーネントをインポートします。import Content from '../components/Content'
Main を '../components/Main' からインポートします。
//ルーティングをインストールします Vue.use(Router);
//ルーティングを設定する export default new Router({
	ルート:[
		{
			//ルートパス パス:'/content',
			//ルート名 name:'content',
			// コンポーネントにジャンプする component:Content
			},
  {
			//ルートパス path:'/main',
			//ルート名 name:'main',
			// コンポーネントにジャンプ component:Main
		}
	]
});

5. main.jsでルーティングを設定する

'vue' から Vue をインポートします
'./App' から App をインポートします

//上記で作成したルーティング設定ディレクトリをインポートします。import router from './router' //内部のルーティング設定を自動的にスキャンします。//プロダクション モードでプロンプトをオフにするには、Vue.config.productionTip = false;

新しいVue({
	el:"#アプリ",
	//ルーティングルーターを構成する、
	コンポーネント:{App},
	テンプレート:'<App/>'
});

6. App.vueでルーティングを使用する

<テンプレート>
	<div id="アプリ">
		<!--
			router-link: デフォルトでは、<a> タグとしてレンダリングされ、to 属性は指定されたリンクです。router-view: ルートに一致するコンポーネントをレンダリングするために使用されます -->
		<router-link to="/main">ホーム</router-link>
		<router-link to="/content">コンテンツ</router-link>
		<ルータービュー></ルータービュー>
	</div>
</テンプレート>

<スクリプト>
	エクスポートデフォルト{
		名前:'アプリ'
	}
</スクリプト>

<スタイル></スタイル>

上記は、Vue-router ルーティングの使用方法の詳細な内容です。Vue-router ルーティングの使用方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • vue-router 4 の使用例の詳しい説明
  • Vue でのルータービューコンポーネントの使用に関する詳細な説明
  • Vue3ルーティングVueRouter4を使用する簡単な例
  • Vue-Routerのインストールと使用方法の詳細な説明
  • vue3 で vue-router を使用するための完全な手順
  • vue3.0 で Router を使用する方法をご存知ですか?

<<:  MySQL 5.7.18 のインストールと設定方法のグラフィックチュートリアル (CentOS7)

>>:  LNMP を展開して HTTPS サービスを有効にする方法に関するチュートリアル

推薦する

tdが空の場合に境界線を表示する方法

以前、CSS を使用してテーブルの border + bordercolordark + borde...

antd ツリーと親子コンポーネント間の値転送問題について (React のまとめ)

プロジェクト要件: 製品ツリー ノードをクリックすると、そのノードのすべての親ノードが取得され、表に...

MySQLデータベースでサポートされているストレージエンジンの比較

目次ストレージエンジンMySQL でサポートされているストレージ エンジン同時実行制御ロック粒子をロ...

vue3ソースコード解析の簡単な実装方法

目次序文🍹準備🍲vue3 の使い方🍖 実装要約する序文最近、私の最初の公式 vue3 + ts プロ...

Elasticsearch を使用する際の一般的な問題の解決策

1. redis で使用すると Netty の起動競合が発生するため、***Application ...

MySQLのメモリ使用量を表示する方法の詳細な説明

序文この記事では主にMySQLのメモリ使用量に関する関連コンテンツを紹介し、皆さんの参考と学習のため...

バックエンド サーバー プロキシとして Nginx を推奨する理由 (理由分析)

1. はじめに実際のサーバーはパブリックインターネットに直接公開されるべきではありません。そうしな...

Docker で Jenkins-2.249.3-1.1 をインストールする詳細な手順

目次1. Dockerをインストールする2. Jenkinsイメージファイルを取得する3. マウント...

Vue-CLI3.xはプロジェクトをサーバーに自動的にデプロイします

目次序文1. scp2をインストールする2. テスト/本番環境サーバーのSSHリモートログインアカウ...

Vue3+Element+Tsは、フォームの基本的な検索リセットやその他の機能を実装します

Vue2 の記述スタイルから Vue3 の形式に切り替えると、記述スタイルとコード構造にいくつかの変...

VUEの基本を理解するのに役立つ記事

目次VUEとはVueのコアプラグインVueルーターヴュークスアクシオス要素UI Vue フロントエン...

コーディングスキルを向上させるためのJavaScriptのヒント

目次1. 一意の値をフィルタリングする2. 短絡評価2.1 シナリオ例3. ブール変換4. 文字列を...

Linux でファイルをあいまい検索するのに適したコマンドは何ですか?

1. はじめにこの記事では、主に Linux システムでコマンドライン ツールを使用してファイルを...

HTML マークアップ言語 - リファレンス

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

イメージを再構築せずにDockerにポートを動的に追加する方法

操作中に Docker コンテナの公開ポートを変更または追加する必要がある場合がありますが、実行中の...