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

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

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

Vue.use(VueRouter);

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

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

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

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

'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
		}
	]
});

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

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

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

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

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

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