Merge branch 'features/routing' into beta

client/package-lock.json

@@ -11325,6 +11325,11 @@
         "got": "^8.0.3"
       }
     },
+    "vue-router": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.6.tgz",
+      "integrity": "sha512-GYhn2ynaZlysZMkFE5oCHRUTqE8BWs/a9YbKpNLi0i7xD6KG1EzDqpHQmv1F5gXjr8kL5iIVS8EOtRaVUEXTqA=="
+    },
     "vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",

client/package.json

@@ -23,7 +23,8 @@
   "dependencies": {
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
-    "vue-resource": "^1.5.1"
+    "vue-resource": "^1.5.1",
+    "vue-router": "^3.1.6"
   },
   "devDependencies": {
     "babel-eslint": "^10.0.3",

client/src/App.vue

@@ -1,5 +1,10 @@
 <template>
-  <div id='app'>
+  <div id="app">
+    <div id="nav">
+      <router-link to="/">Home</router-link> |
+      <router-link to="/posts">Posts</router-link>
+    </div>
+    <router-view />
   </div>
 </template>
 

client/src/main.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import VueResource from 'vue-resource'
 
 import App from './App.vue'
+import router from './router'
 
 Vue.config.productionTip = false
 
@@ -9,4 +10,5 @@ Vue.use(VueResource)
 
 new Vue({
   render: h => h(App),
+  router,
 }).$mount('#app')

client/src/router/index.js

@@ -0,0 +1,27 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Home from '../views/Home.vue'
+import posts from '../views/posts.vue'
+
+Vue.use(VueRouter)
+
+const routes = [
+  {
+    path: "/",
+    name: "Home",
+    component: Home,
+  },
+  {
+    path: "/posts",
+    name: "Posts",
+    component: posts,
+  },
+]
+
+const router = new VueRouter({
+  mode: "history",
+  base: process.env.BASE_URL,
+  routes,
+})
+
+export default router

client/src/views/Home.vue

@@ -0,0 +1,19 @@
+<template>
+<div id="home">
+  <h1>Home</h1>
+  <aboutme/>
+</div>
+</template>
+
+<script>
+import aboutme from '@/components/aboutme'
+
+export default {
+  name: "Home",
+  components: {
+    aboutme
+  },
+}
+</script>
+
+<style scoped></style>