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 の他の関連記事に注目してください。

以下もご興味があるかもしれません: