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 インストール

  1. $ npm install vue-router

1.2 Vue Routerに対応させる

プロジェクトの構造

vue_router_struct

main.js

import パス中の、@/ は、Webpack が、/src/に解決するようだ

  1. import Vue from 'vue'
  2. import VueRouter from 'vue-router'
  3. import '@/plugins/vuetify'
  4. import App from '@/App.vue'
  5.  
  6. import FavoPhrase from '@/components/FavoPhrase'
  7. import About from '@/components/About'
  8.  
  9. Vue.config.productionTip = false
  10. Vue.use(VueRouter)
  11.  
  12. const routes = [
  13. { path: '/', component: FavoPhrase },
  14. { path: '/about', component: About }
  15. ]
  16.  
  17. const router = new VueRouter({
  18. routes
  19. })
  20.  
  21. new Vue({
  22. render: h => h(App),
  23. router:router
  24. }).$mount('#app')

App.vue

Vue Router のAP)リファレンス https://router.vuejs.org/ja/api/#router-link-props

<v-btn to=”パス名”> で、遷移可能

  1. <template>
  2. <v-app>
  3. <v-toolbar>
  4. <v-toolbar-side-icon></v-toolbar-side-icon>
  5. <v-toolbar-title>FavoPhrase</v-toolbar-title>
  6. <v-spacer></v-spacer>
  7. <v-toolbar-items class="hidden-sm-and-down">
  8. <v-btn flat to="/">Home</v-btn>
  9. <v-btn flat to="/about">About</v-btn>
  10. <v-btn flat>Link Three</v-btn>
  11. </v-toolbar-items>
  12. </v-toolbar>
  13. <v-content>
  14. <router-view></router-view>
  15. </v-content>
  16. </v-app>
  17. </template>
  18.  
  19. <script>
  20. </script>

About.vue

  1. <template>
  2. <v-container>
  3. About
  4. </v-container>
  5. </template>

2.実行

App.vueで定義した、ヘッダー部分のボタンをクリックすることで遷移する。

vue_router1

vue_router2

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

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です