VUE-ルータのルーティングVUEのインストールと使用

1.プロジェクトを作成するときに選択しない場合VUE-ルータのケースをインストールcnpm、インストール

2.と仮定アプリケーションのルートアセンブリ、および2つのカスタムコンポーネントのリストのホーム

 運転中main.js

インポート「VUE」からVueの
アプリケーション「./App.vue」からのインポート
//導入ルートが
VueRouter 『VUE-ルータ』からインポート

Vue.use（VueRouter）

//導入が意味
ホーム「./components/Home」からのインポートを
インポートリスト'./components/List'から

//ルーティング設定
= [CONSTルートを
  {パス： '/ホーム'、コンポーネント：ホーム}、
  {パス： '/一覧'、コンポーネント：リスト}、
  {パス： '*'、リダイレクト： '/ホーム'} / *デフォルトルートがスキップ* / 
] 

//ルーティングインスタンス
（{CONST =新しい新しいルータVueRouterを
  ルート//（略称）ルート対応する：経路
}）

新しい新しいヴュー（{ 
  EL '#app'を、
  ルータは、ルーティング//マウント
  H => H（APP）：レンダリングを
）}

 アプリのコンポーネント

<テンプレート> 
  の<divのid = "アプリ"> 
    <= "/ホーム"へのルータ・リンク>首页</ルータ・リンク> 
    <= "/リスト"へのルータ・リンク>列表</ルータ・リンク> 

    <！ - -放置路由- > 
    <ルータビュー> </ルータビュー> 
  </ div> 
</テンプレート> 

<スクリプト> 
輸出デフォルト{ 
  名： 'アプリ'、
  データ（）{ 
    リターン{ 
      MSG：「あなたのVueへようこそアプリケーションの.js」
    } 
  } 
} 
</ SCRIPT> 

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

家

<テンプレート> 
  の<div> 
    家组件
  </ DIV> 
</テンプレート> 
<スクリプト> 
輸出デフォルト{ 
  データ（）{ 
    リターン{ 
    } 
  } 
} 
</ SCRIPT>

効果