vue-routerの追加実装

vue-routerの追加

$ npm install --save-dev vue-router

rouoter用のindex.jsを作成

src/router配下にindex.jsを作成

import Vue from 'vue';
import VueRouter from 'vue-router';
import HelloWorld from '../components/HelloWorld';

Vue.use(VueRouter);

const routes = [
    { path: '/', component: HelloWorld },
];

const router = new VueRouter({
    routes,
    mode: 'history'
});

export default router;

main.jsにrouterを追記

import Vue from 'vue'
import App from './App.vue'
+ import router from './router'
import vuetify from './plugins/vuetify';
import './registerServiceWorker'

Vue.config.productionTip = false

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

App.vueで<router-view>に書き換え

    <v-content>
+      <router-view/>
    </v-content>

直接、のコンポーネントを参照している箇所を<router-view>に書き換え。

変わらず、画面が表示されたのでおk。

参考記事

qiita.com