VueRouter使い方

VueRouterのインストールから初期セットアップ

vue-routerをインストール

npm install vue-router

vue-routerを利用する各ファイル

main.js

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';

//router.jsファイル
import router from './router'

Vue.config.productionTip = false

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

router.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'Index',
      component: () => import('./components/Index.vue')
    },
    {
      path: '/form',
      name: 'Form',
      component: () => import('./components/Form.vue')
    },
  ]
})

App.vue

<template>
  <div id="app">  
    <v-app>
      <Header/>
      //Routerを利用
      <router-view/>
      <Footer />
    </v-app>
  </div>
</template>

router使用例

example.vue

<router-link to="/foo">Go to Foo</router-link>

//Vuetifyのv-btnとの組み合わせ
<router-link tag="v-btn" to="/edituser">登録情報を変更</router-link>

//Vuetifyのv-btnとパラメータをセット
<router-link tag="v-btn" :to="{ name: 'ToPage', params: { id: this.$route.query.fooid }}"


//画面表示時にStore(Vuex)からログイン状態を取得。ログインしていない場合にログインページへ遷移
created(){
      const loginStatus = this.$store.getters['loginStatus'];
      if (loginStatus == false && this.$router.currentRoute.path != "/login") {
        this.$router.push({name : "PageLogin"});
        return;
      }

参考