Vue.js + Vuex + VuetifyとFirebaseでSPAを作る(その2)

import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
Vue.use(Router);
export default new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      name: "home",
      component: Home
    },
    {
      path: "/about",
      name: "about",
      component: () => import("./views/About.vue")
    },
    {
      path: "/menu",
      name: "menu",
      component: () => import("./views/Menu.vue")
    },
    {
      path: "/sign-in",
      name: "signin",
      component: () => import("./views/Signin.vue")
    },
    {
      path: "/join",
      name: "join",
      component: () => import("./views/Join.vue")
    }
  ]
});

<template>
  <v-container fluid>
    <v-layout>
      <h1>Menu Page</h1>
    </v-layout>
  </v-container>
</template>
<script>
export default {
  name: "Menu"
};
</script>
<style scoped>
</style>

<template>
  <v-container fluid>
    <v-layout>
      <h1>Signin Page</h1>
    </v-layout>
  </v-container>
</template>
<script>
export default {
  name: "Signin"
};
</script>
<style scoped>
</style>

<template>
  <v-container fluid>
    <v-layout>
      <h1>Join Page</h1>
    </v-layout>
  </v-container>
</template>
<script>
export default {
  name: "Join"
};
</script>
<style scoped>
</style>

<template>
  <span>
    <v-navigation-drawer app v-model="drawer" class="brown lighten-2" dark disable-resize-watcher>
      <v-list>
        <template v-for="(item, index) in items">
          <v-list-tile :key="index">
            <v-list-tile-content>{{item.title}}</v-list-tile-content>
          </v-list-tile>
          <v-divider :key="`divider-${index}`"></v-divider>
        </template>
      </v-list>
    </v-navigation-drawer>
    <v-toolbar app color="brown darken-4" dark>
      <v-toolbar-side-icon class="hidden-md-and-up" @click="drawer = !drawer"></v-toolbar-side-icon>
      <v-spacer class="hidden-md-and-up"></v-spacer>
      <router-link to="/">
        <v-toolbar-title to="/">{{appTitle}}</v-toolbar-title>
      </router-link>
      <v-btn flat class="hidden-sm-and-down" to="/menu">Menu</v-btn>
      <v-spacer class="hidden-sm-and-down"></v-spacer>
      <v-btn flat class="hidden-sm-and-down" to="/sign-in">SIGN IN</v-btn>
      <v-btn color="brown lighten-3" class="hidden-sm-and-down" to="/join">JOIN</v-btn>
    </v-toolbar>
  </span>
</template>

<script>
export default {
  name: "AppNavigation",
  data() {
    return {
      appTitle: "HedgeHogs 🦔 ",
      drawer: false,
      items: [
        { title: "Menu" },
        { title: "Profile" },
        { title: "Sign In" },
        { title: "Join" }
      ]
    };
  }
};
</script>

<style scoped>
</style>

<style scoped>
a {
  color: white;
  text-decoration: none;
}
.router-link-exact-active {
  color: white;
  text-decoration: none;
}
.v-toolbar__title {
  color: white;
  text-decoration: none;
}
</style>

<template>
  <v-container fluid>
    <v-layout>
      <h1>About Page</h1>
    </v-layout>
  </v-container>
</template>
<script>
export default {
  name: "About"
};
</script>
<style scoped>
</style>