【Vue.js】Vue Routerの書き方、使い方

Vue Routerの準備(Vue-CLI)

Router をmain.jsに登録

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from "./store"

Vue.config.productionTip = false

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

router/index.js にVueコンポーネントのルートを登録する

以下のようにcliを介してvueとvue-routerをimport
Vue.use(VueRouter)でVue Routerが使えるようになる

Vueコンポーネントのルートもここに登録

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import BasicForm from '@/components/BasicForm.vue'
import QuestionnaireForm from '@/components/QuestionnaireForm.vue'
import ConsultationFrom from '@/components/ConsultationFrom.vue'
import ConfirmationFrom from '@/components/ConfirmationFrom.vue'

Vue.use(VueRouter)

const routes = [ //ルートをいくつか定義
  { //各ルートは 1 つのコンポーネントとマッピングされる必要がある（ここでは、path: '/'）
    path: '/', //path: '宛先パス'
    name: 'BasicForm', //(name: コンポーネント名)
    component: BasicForm //conponent コンポーネント名
  },
  {
    path: '/questionnaire',
    name: 'QuestionnaireForm',
    component: QuestionnaireForm
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    // component: () => import(/* webpackChunkName: "about" */ '../views/QuestionnaireForm.vue')//これは何
  },
  {
    path: '/consultation',
    name: 'ConsultationFrom',
    component: ConsultationFrom
  },
  {
    path: '/confirmation',
    name: 'ConfirmationFrom',
    component: ConfirmationFrom
  }
]

const router = new VueRouter({ //ルーターインスタンスを作成して、ルートオプションを渡す
  mode: 'history',
  base: process.env.BASE_URL,
  routes // `routes: routes` の短縮表記
})

export default router

参考