VUE-ルータのルーティングサブ

レッドフォントの追加やコンテンツへの変更！！！

1、新しいSRC / router.js

2、SRC / main.js　　

//インポートVUEと新しいrouter.js　　　

「表示」からインポートビュー

「./router.js'からインポートルータ

3、SRC / router.js

//インポートとVUE VUE-ルータ

「表示」からインポートビュー

「VUE-ルータ」からインポートVueRouter

（VueRouterという名前の、あなたは簡単に取ることができます）//使用VUE-ルータ

Vue.use（VueRouter）

//テンプレート・コンポーネントのコンテンツを定義します

CONST最初= {テンプレート： '<div>これは、第1のコンテンツ</ div>で'}

CONST第= {テンプレート： '<div>これは、第2のコンテンツ</ div>で'}

constのホーム= {テンプレート： '<DIV>これはホームコンテンツである</ DIV>'}

CONST firstFirst = {テンプレート： '<div>これはfirstFirstコンテンツである</ DIV>'}

CONST firstSecond = {テンプレート： '<DIV>この第一、第二の内容は</ DIV>'}

CONST SLD = {

テンプレート： `

<ルータビュークラス=「ABC」> </ルータビュー>

</ div>

}

//コンポーネントのパスを定義します

constのルータ=新しいVueRouter（{

モード：「歴史」、

ベース：__ dirnameは、

ルート：[//ルート

{パス "/"、成分：ホーム}

{パス "/第一"、成分：SLD、

子供：[

{パス "/"、成分：第一}

{パス： "第一"、成分：firstFirst}

{パス： "第二"、成分：firstSecond}

]

}、

{パス "/秒"、成分：第二}

]

}）

//コンポーネントを使用します

新しいビュー（{

ルータ、

テンプレート： `

<DIVのID = "R">

<UL>

=「アセンブリへのパス」に//ルータリンク

<UL>

<= "/第一/第一" へのルータ・リンク> <LI>最初の</ルータ・リンク> </ LI>

</ UL>

</ LI>

</ UL>

<ルータビュークラス=「ABC」> </ルータビュー>

//ルータビューアセンブリ表示領域

</ div>

}）。$マウント（ "＃アプリ"）//コンポーネント）のindex.html IDアプリで定義されている（div要素を搭載し