Vuetifyに Vue Router を導入し画面遷移

1. Google App Engine Java Standard + Spring Boot 環境構築

2. Spring Bootのテンプレートエンジン Thymeleafを適用

3. Spring BootにVue.jsを利用する

4. Spring BootにVuetify導入からクロスドメインAjax通信

5. Spring Boot+Vuetify GAEへデプロイ、動作確認

6. Xamarin.FormsアプリをiOS用にビルド

7. Xamarin.Forms ポップアップの表示と Http通信

8. Spring Boot+Vuetify ファイルのアップロードとJSONで結果を返す

9. Google Google Cloud Vision でOCR。VuetifyからSpringBoot経由で呼び出し

10. Xamarin ファイル選択

11. Xamarin ファイルのアップロード

1.Vue Router の導入

Vuetify導入、REST リクエストを投げられるようにした状態に対して、Vue Routerを導入し、画面遷移を実現する。

https://router.vuejs.org/ja/

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で定義した、ヘッダー部分のボタンをクリックすることで遷移する。

意外と簡単に導入できるのでうれしい。