【Vue.js】 vue-routerを利用してルーティング作成し画面遷移を！！

【ゴール】

Vue.js vue-routerを利用してルーティング作成し画面遷移を！！

【環境】

mac catarina 10.156
Vue.js v2.6.12

【実装】

node.js vue.jsのインストールは割愛

作業場所を作成

/.bash

$ vue create routing.js
$ cd routing.js
$ npm install vue-router
$ cd src
$ touch router.js
$ cd ..
$ npm run serve

コーディング

route.js

import Vue from 'vue';
import Router from 'vue-router';
import コンポーネント命名　from '作成したコンポーネント名'

Vue.use(Router);


export default new Router({
  mode: 'history',
  routes: [
    {path: '/', component: },
    {path: 'お好きなルーティング名', component: 上で命名したコンポーネント名},
    {path: 'お好きなルーティング名', component: 上で命名したコンポーネント名},
     .
     .
     .
     .

  ]

})

App.js

import router from './router'

.
.
.


new Vue({
  router,     //←追加
  render: h => h(App),
}).$mount('#app')

無限に増やせます🙇‍♂️

【まとめ】

■「vue-router」をインストール
■「src」配下に「router.js」を作成しルーティングの設定をコーディングしていく
■「App.js」で「router.js」をimportして適用させる

【オススメ記事】

■ 【Vue.js】 IF文・For文　条件分岐、繰り返し処理
https://qiita.com/tanaka-yu3/items/0ccf9a11525331b764de

■ 【Vue.js】 axios / firebaseを利用して、データのやり取り
https://qiita.com/tanaka-yu3/items/192886ce66522f027365

■ 【Vue.js】Vue.jsでfontawsome(Free版)を使用する方法　　
https://qiita.com/tanaka-yu3/items/86d05241f72674d186f6