ルーティングするVUE-ルータのヴュー

1、インストールルート・プラグイン

NPM --save VUE-ルータを設置

2、書き込み2つのVUE部品、コンポーネントディレクトリ内home.vueとabout.vue

<テンプレート> 
  の<div> 
    <H1>約</ H1> 
    <P> {{aboutMsg}} </ P> 
  </ div> 
</テンプレート> 
<スクリプト> 
  エクスポートデフォルト{ 
    データ（）{ 
      リターン{ 
        aboutMsg：「我是组件について" 
      } 
    } 
  }
 </ SCRIPT>

<テンプレート> 
  の<div> 
    <H1>ホーム</ H1> 
    <P> {{MSG}} </ P> 
  </ div> 
</テンプレート> 
<スクリプト> 
  輸出デフォルト{ 
    データ（）{ 
      リターン{ 
        MSG：" 我是家庭组件" 
      } 
    } 
  }
 </ SCRIPT>

3、srcディレクトリのrouter.jsに次のファイルを作成します

輸入ヴューから 「VUE 」。
輸入VueRouter から 「VUE-ルータ」。

// 引入组件 
輸入自宅から 「./components/home.vue 」。
およそインポートから 「./components/about.vue 」。

// 要告诉VUE使用vueRouter 
Vue.use（VueRouter）。

CONSTルート= [ 
  { 
    パス：" /ホーム" 、
    成分：家庭
  }、
  { 
    パス："、
    成分：約
  } 
] 

VaRのルータ=   新しいVueRouter（{ 
  ルート
}）
エクスポートデフォルトルータ。

4、main.jsについてのいくつかの行を追加します。

// `import`コマンドを使用して、負荷へのVueのビルドバージョンは、
 // （実行時のみ、またはスタンドアロン）の別名でwebpack.base.confで設定されています。
輸入ヴューから ' VUE ' 
輸入のApp から ' ./App ' 
輸入ルータから ' ./router.js ' 
Vue.config.productionTip = 偽
/ * eslintディセーブル無新しい* / 
新しいヴュー（{ 
  ：エル" #app ' ルータ、 
  コンポーネント：{アプリケーション}、
  テンプレート：' <APP /> '、

}）

図5に示すように、基準アセンブリApp.vue

<テンプレート> 
  <DIV ID = " アプリケーション" > 
    <IMG SRC = " ./assets/logo.png " > 
<！ - <HelloWorldの/> - > 
    A     <ヘッダ> 
      <！ -ルータ-リンク次に移動するにはどのパスのクリックを定義した後- > 
      <リンクルータ-へ= 「/ホーム」 >ホーム</ルーターリンク> 
      <-Linkルーター=に「について/ 」 >について</ルータリンク> 
    </ヘッダ> 
    <！ -ルータ-ビューに描画されたコンテンツに対応するコンポーネント- > 
    <ルータビュー> </ルータビュー> 
  </ div> 
</テンプレート>
<スクリプト> 
インポートのHelloWorld から"

 ./components/HelloWorld ' 
輸入MyVue から  ' ./components/MyVue ' 
輸出のデフォルト {名：' アプリケーション」、
  コンポーネント：{HelloWorldの、
    MyVue 
}   // 组件注册

}
 </ SCRIPT> 

<スタイル> 
#app { 
  フォント -family ：「アベニール」、ヘルベチカ、ゴシック、sans- セリフ。
  -webkit-font- スムージング：アンチエイリアス。
  -moz-OSX-font- スムージング：グレースケール。
  テキスト - 整列：センター; 
  色：＃2c3e50。
  マージン- トップ：60PX; 
}
 </スタイル>

ルーティングするVUE-ルータのヴュー

おすすめ