はじめに

c-mappプロジェクトの一環として、今回はVuetifyを中心に編集していこうと思います。

というのも、前回のrouter導入時に無理やりソースを書き換えるタイプのコマンドを入力して実行したため、ソースが地味に変になっています。とは言っても、そこまで難しい話でもないので、そこをまずは直しつつ、更に有るべき形を目指しながらやっていきましょう。

Homeを編集してみる

まず、新たに追加されたHome.vueを見てみましょう。

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  }
}
</script>

HelloWorld.vueコンポーネントを取り込んでいます。まず、このファイルを以下の内容に変更してみましょう。

<template>
  <v-container>
    <v-row class="text-center" dense-no-gutters>
      <v-col>
        <h1>Home</h1>
      </v-col>
    </v-row>
    <v-row class="text-center" dense-no-gutters>
      <v-col>
        ホームページ
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: 'Home'
}
</script>

編集すると、以下の内容になります。

ついでに、About.vueも一旦このような形に編集しましょう。

<template>
  <v-container>
    <v-row class="text-center" dense-no-gutters>
      <v-col>
        <h1>About</h1>
      </v-col>
    </v-row>
    <v-row class="text-center" dense-no-gutters>
      <v-col>
        This is an About Page.
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: 'About'
}
</script>

次に、App.vueを編集してみましょう。

共通部分の編集

App.vueは共通部分の編集になります。ここの<router-view />の部分に、作成しているHomeやAboutの内容が表示されます。画面上部のナビバーも含めて編集していきます。

一旦このような形に修正してみます。

<template>
  <v-app>
    <v-app-bar
      app
      color="primary"
      dark
    >
      <v-app-bar-title>c-mapp</v-app-bar-title>
      <v-btn to="/">Home</v-btn>
      <v-btn to="/about">About</v-btn>
    </v-app-bar>
    <v-content>
      <router-view />
    </v-content>
  </v-app>
</template>