Implement multiple pages' URI by vue-router

Author: nikukyugamer

src/App.vue

@@ -1,37 +1,11 @@
 <template>
-  <div id="app">
-    <Home v-if="!isLogin"></Home>
-    <Editor v-if="isLogin" :user="userData"></Editor>
-  </div>
+<div id="app">
+  <router-view></router-view>
+</div>
 </template>
 
 <script>
-import Home from "./components/Home.vue"
-import Editor from "./components/Editor.vue"
-
 export default {
-  name: "app",
-  data() {
-    return {
-      isLogin: false,
-      userData: null
-    }
-  },
-  created: function() {
-    firebase.auth().onAuthStateChanged(user => {
-      console.log(user)
-      if (user) {
-        this.isLogin = true
-        this.userData = user
-      } else {
-        this.isLogin = false
-        this.userData = null
-      }
-    })
-  },
-  components: {
-    Home: Home,
-    Editor: Editor
-  }
+  name: "app"
 }
-</script>
+</script>

src/main.js

@@ -2,8 +2,10 @@ import 'shitajicss/docs/css/shitaji.min.css'
 import './scss/style.scss'
 import Vue from 'vue'
 import App from './App.vue'
+import router from './router'
 
 new Vue({
   el: '#app',
+  router: router,
   render: h => h(App)
 })

src/router.js

@@ -0,0 +1,22 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Top from './views/Top'
+import Terms from './views/Terms'
+
+Vue.use(VueRouter)
+const routes = [
+  {
+    path: '/',
+    name: 'top',
+    component: Top
+  },
+  {
+    path: '/terms',
+    name: 'terms',
+    component: Terms
+  }
+]
+
+export default new VueRouter({
+  routes: routes
+})

src/views/Terms.vue

@@ -0,0 +1,19 @@
+<template>
+<div id="terms">
+  <h1>
+    利用規約
+  </h1>
+  <p>
+    ここに利用規約の文章が入ります。
+  </p>
+  <router-link :to="{ name: 'top' }">
+    TOPに戻る
+  </router-link>
+</div>
+</template>
+
+<script>
+export default {
+  name: "terms"
+}
+</script>

src/views/Top.vue

@@ -0,0 +1,46 @@
+<template>
+  <div id="top">
+    <Home v-if="!isLogin"></Home>
+    <Editor v-if="isLogin" :user="userData"></Editor>
+    <router-link :to="{ name: 'terms' }">
+      利用規約
+    </router-link>
+  </div>
+</template>
+
+<script>
+import Home from "../components/Home.vue"
+import Editor from "../components/Editor.vue"
+
+export default {
+  name: "top",
+  data() {
+    return {
+      isLogin: false,
+      userData: null
+    }
+  },
+  created: function() {
+    firebase.auth().onAuthStateChanged(user => {
+      console.log(user)
+      if (user) {
+        this.isLogin = true
+        this.userData = user
+      } else {
+        this.isLogin = false
+        this.userData = null
+      }
+    })
+  },
+  components: {
+    Home: Home,
+    Editor: Editor
+  }
+}
+</script>
+
+<style lang="scss">
+#top {
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
+}
+</style>