routing

src/App.vue

@@ -1,13 +1,5 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">
-        Home
-      </router-link> |
-      <router-link to="/about">
-        About
-      </router-link>
-    </div>
     <router-view />
   </div>
 </template>

src/router/index.js

@@ -9,28 +9,31 @@
 
 import Vue from 'vue';
 import VueRouter from 'vue-router';
-import Home from '../views/Home.vue';
-import About from '../views/About.vue';
+import AppView from '../views/AppView.vue';
+import NotFound from '../views/NotFound.vue';
 
 Vue.use (VueRouter);
 
 const routes = [
   {
-    path:      '/',
-    name:      'Home',
-    component: Home
+    path:      '/app/:id',
+    name:      'AppView',
+    component: AppView
   },
   {
-    path:      '/about',
-    name:      'About',
-    component: About
-  }
+    path:      '/404',
+    name:      '404',
+    component: NotFound
+  },
+  { path: '*', redirect: '404' }
 ];
 
 const router = new VueRouter ({
-  mode: 'history',
-  base: process.env.BASE_URL,
-  routes
+  mode:     'history',
+  // eslint-disable-next-line no-process-env
+  base:     process.env.BASE_URL,
+  routes,
+  fallback: true
 });
 
 export default router;

src/store/index.js

@@ -19,7 +19,7 @@ export default new Vuex.Store ({
   },
   actions:   {
     async get_log ({ commit }) {
-      const log = await fetch ('log')
+      const log = await fetch ('/log')
         .then ((res) => res.json ());
       commit ('set_log', log);
     }

src/views/About.vue

@@ -1,9 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
-
-<script>
-export default {};
-</script>

src/views/AppView.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="grid">
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+    <p>test</p>
+  </div>
+</template>
+
+<script>
+import Vuex from 'vuex';
+
+export default {
+  computed: { ...Vuex.mapState ({ log: (state) => state.log }) },
+  mounted () {
+    this.get_log ();
+  },
+  methods: { ...Vuex.mapActions ({ get_log: 'get_log' }) }
+};
+</script>
+
+<style scoped>
+.grid {
+  display: grid;
+  grid-auto-columns: 2in;
+  grid-auto-rows: 1in;
+  grid-auto-flow: dense;
+  width: 100%;
+  height: 100%;
+}
+
+p {
+  display: inline-block;
+}
+</style>

src/views/Home.vue

@@ -1,19 +0,0 @@
-<template>
-  <div class="home">
-    <TableView :items="log" />
-  </div>
-</template>
-
-<script>
-import Vuex from 'vuex';
-import TableView from '../components/TableView.vue';
-
-export default {
-  components: { TableView },
-  computed:   { ...Vuex.mapState ({ log: (state) => state.log }) },
-  mounted () {
-    this.get_log ();
-  },
-  methods: { ...Vuex.mapActions ({ get_log: 'get_log' }) }
-};
-</script>

src/views/NotFound.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>not found</div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+
+</style>