Vuetifyに Vue Router を導入し画面遷移
1.Vue Router の導入
Vuetify導入、REST リクエストを投げられるようにした状態に対して、Vue Routerを導入し、画面遷移を実現する。
1.1 インストール
- $ npm install vue-router
1.2 Vue Routerに対応させる
プロジェクトの構造
main.js
import パス中の、@/ は、Webpack が、/src/に解決するようだ
- import Vue from 'vue'
- import VueRouter from 'vue-router'
- import '@/plugins/vuetify'
- import App from '@/App.vue'
- import FavoPhrase from '@/components/FavoPhrase'
- import About from '@/components/About'
- Vue.config.productionTip = false
- Vue.use(VueRouter)
- const routes = [
- { path: '/', component: FavoPhrase },
- { path: '/about', component: About }
- ]
- const router = new VueRouter({
- routes
- })
- new Vue({
- render: h => h(App),
- router:router
- }).$mount('#app')
App.vue
Vue Router のAP)リファレンス https://router.vuejs.org/ja/api/#router-link-props
<v-btn to=”パス名”> で、遷移可能
- <template>
- <v-app>
- <v-toolbar>
- <v-toolbar-side-icon></v-toolbar-side-icon>
- <v-toolbar-title>FavoPhrase</v-toolbar-title>
- <v-spacer></v-spacer>
- <v-toolbar-items class="hidden-sm-and-down">
- <v-btn flat to="/">Home</v-btn>
- <v-btn flat to="/about">About</v-btn>
- <v-btn flat>Link Three</v-btn>
- </v-toolbar-items>
- </v-toolbar>
- <v-content>
- <router-view></router-view>
- </v-content>
- </v-app>
- </template>
- <script>
- </script>
About.vue
- <template>
- <v-container>
- About
- </v-container>
- </template>
2.実行
App.vueで定義した、ヘッダー部分のボタンをクリックすることで遷移する。
意外と簡単に導入できるのでうれしい。