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 サービスを有効にする方法に関するチュートリアル

推薦する

Ubuntu は、Mysql+Keepalived の高可用性実装 (デュアルアクティブ ホットスタンバイ) を構築します。

Mysql5.5 デュアルマシン ホットスタンバイ実装 2つのMySQLをインストールするMySQ...

MySQL ピボットテーブルについての簡単な説明

次のような製品部品表があります。一部 部品ID 部品タイプ 製品ID ---------------...

インデックスを設計する際の原則は何ですか? インデックスの障害を回避するにはどうすればよいでしょうか?

目次主キーインデックス頻繁にクエリされるフィールドのインデックスを作成する大きなフィールドのインデッ...

nofollowタグの使用と分析に関する簡単な説明

nofollowをめぐる論争Zac と Guoping の間では、nofollow が PR を無駄...

ネイティブ JS オブジェクト指向タイピング ゲーム

この記事では、JSオブジェクト指向タイピングゲームの具体的なコードを参考までに紹介します。具体的な内...

Dockerを使用してOracle_11gをインストールする方法

DockerでOracle_11gをインストールする1. oracle_11gイメージを取得する d...

Windows での MySQL 8.0.18 インストール チュートリアル (図解)

ダウンロードダウンロードアドレス: https://dev.mysql.com/downloads/...

IIS7 IIS8 http は自動的に HTTPS にジャンプします (ポート 80 はポート 443 にジャンプします)

IIS7 では、「URL REWRITE2」疑似静的モジュールがインストールされているかどうかを確...

Vue で手ぶれ補正を実装するためのサンプルコード

手ぶれ防止: 繰り返しのクリックによるイベントのトリガーを防止まず、揺れとは何でしょうか? 震えるの...

CentOS7 デプロイメント Flask (Apache、mod_wsgi、Python36、venv)

1. Apacheをインストールする # yum インストール -y httpd httpd-de...

JS の 3 つの主要な問題、非同期性とシングルスレッドについて簡単に説明します。

目次シングルスレッド非同期シングルスレッドしかし、開発中にネットワーク リクエストやスケジュールされ...

Linux で nohup ログ出力が大きすぎる問題の解決方法の詳細な説明

最近、hadoop テスト クラスターで spark ストリーミング プログラムを実行し、その後、n...

NavicatでMySQLビッグデータをインポートする際のエラーの解決方法

Navicat がエクスポートしたデータはインポートできません。最後に、MySQLコマンドのインポー...

Node.js+express+socket でオンラインのリアルタイム多人数チャットルームを実現

この記事では、オンラインリアルタイム多人数チャットルームを実現するためのNode.js+expres...

TomcatはNginxリバースプロキシのクライアントドメイン名を取得します

質問Nginx リバース プロキシの後、Tomcat アプリケーションは、クライアント ブラウザーの...