From e0d4ff6cc662c64aa97af7a90f239be86ea75750 Mon Sep 17 00:00:00 2001
From: Bertrand Benjamin <benjamin.bertrand@opytex.org>
Date: Tue, 8 Jun 2021 23:32:04 +0200
Subject: [PATCH] Feat: basic routing

---
 package-lock.json      | 33 ++++++++++++++++++++++++++-------
 package.json           |  2 +-
 src/App.vue            |  4 +---
 src/components/nav.vue |  6 ++----
 src/main.js            |  9 +++++----
 src/router.js          | 20 ++++++++++++++++++++
 src/views/config.vue   |  3 +++
 src/views/home.vue     |  3 +++
 yarn.lock              | 15 +++++++++++----
 9 files changed, 72 insertions(+), 23 deletions(-)
 create mode 100644 src/router.js
 create mode 100644 src/views/config.vue
 create mode 100644 src/views/home.vue

diff --git a/package-lock.json b/package-lock.json
index 6eb3846..8d73976 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "dependencies": {
         "core-js": "^3.6.5",
         "vue": "^3.0.0",
-        "vue-router": "^3.5.1"
+        "vue-router": "^4.0.8"
       },
       "devDependencies": {
         "@vue/cli-plugin-babel": "~4.5.0",
@@ -2901,6 +2901,11 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.0.0-beta.13",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.0.0-beta.13.tgz",
+      "integrity": "sha512-oZ0n/N4UWpkMvbR1OrBtu+YhaVADo+bYX5lxo9tou7h10p0+v2K9yzzaZATVr0lqHb7iY1wALfO8yojwg0MTHw=="
+    },
     "node_modules/@vue/preload-webpack-plugin": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz",
@@ -18357,9 +18362,15 @@
       }
     },
     "node_modules/vue-router": {
-      "version": "3.5.1",
-      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.1.tgz",
-      "integrity": "sha512-RRQNLT8Mzr8z7eL4p7BtKvRaTSGdCbTy2+Mm5HTJvLGYSSeG9gDzNasJPP/yOYKLy+/cLG/ftrqq5fvkFwBJEw=="
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.8.tgz",
+      "integrity": "sha512-42mWSQaH7CCBQDspQTHv63f34VEnZC20g9QNK4WJ/zW8SdIUeT6TQ2i/78fjF/pVBUPLBWrGhvB7uDnaz7O/pA==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.0.0-beta.10"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
     },
     "node_modules/vue-style-loader": {
       "version": "4.1.3",
@@ -21468,6 +21479,11 @@
         }
       }
     },
+    "@vue/devtools-api": {
+      "version": "6.0.0-beta.13",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.0.0-beta.13.tgz",
+      "integrity": "sha512-oZ0n/N4UWpkMvbR1OrBtu+YhaVADo+bYX5lxo9tou7h10p0+v2K9yzzaZATVr0lqHb7iY1wALfO8yojwg0MTHw=="
+    },
     "@vue/preload-webpack-plugin": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz",
@@ -33077,9 +33093,12 @@
       }
     },
     "vue-router": {
-      "version": "3.5.1",
-      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.1.tgz",
-      "integrity": "sha512-RRQNLT8Mzr8z7eL4p7BtKvRaTSGdCbTy2+Mm5HTJvLGYSSeG9gDzNasJPP/yOYKLy+/cLG/ftrqq5fvkFwBJEw=="
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.8.tgz",
+      "integrity": "sha512-42mWSQaH7CCBQDspQTHv63f34VEnZC20g9QNK4WJ/zW8SdIUeT6TQ2i/78fjF/pVBUPLBWrGhvB7uDnaz7O/pA==",
+      "requires": {
+        "@vue/devtools-api": "^6.0.0-beta.10"
+      }
     },
     "vue-style-loader": {
       "version": "4.1.3",
diff --git a/package.json b/package.json
index 49a136b..698d483 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
   "dependencies": {
     "core-js": "^3.6.5",
     "vue": "^3.0.0",
-    "vue-router": "^3.5.1"
+    "vue-router": "^4.0.8"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
diff --git a/src/App.vue b/src/App.vue
index 2a9306a..6e52ad7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,16 +1,14 @@
 <template>
   <Nav></Nav>
-  <Content></Content>
+  <router-view></router-view>
 </template>
 
 <script>
-import Content from './components/content.vue'
 import Nav from './components/nav.vue'
 
 export default {
   name: 'App',
   components: {
-    Content,
     Nav
   }
 }
diff --git a/src/components/nav.vue b/src/components/nav.vue
index feee502..3f6ee77 100644
--- a/src/components/nav.vue
+++ b/src/components/nav.vue
@@ -1,9 +1,7 @@
 <template>
   <nav>
-  <ul>
-      <li>Plop</li>
-      <li>Pipo</li>
-  </ul>
+  <router-link to="/"> Home </router-link>
+  <router-link to="/config"> Config </router-link>
   </nav>
 </template>
 
diff --git a/src/main.js b/src/main.js
index 48471df..1b825a8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,7 +1,8 @@
 import { createApp } from 'vue'
-import VueRouter from "vue-router"
-import App from './App.vue'
+import App from '@/App.vue'
+import router from '@/router'
 
-vue.use(VueRouter)
 
-createApp(App).mount('#app')
+const app = createApp(App)
+app.use(router)
+app.mount('#app')
diff --git a/src/router.js b/src/router.js
new file mode 100644
index 0000000..d650735
--- /dev/null
+++ b/src/router.js
@@ -0,0 +1,20 @@
+import { createRouter, createWebHistory } from 'vue-router'
+
+import Home from "@/views/home.vue"
+import Config from "@/views/config.vue"
+
+const routes = [
+    {
+        path: '/',
+        name: 'home',
+        component: Home
+    },
+    {
+        path: '/config',
+        name: 'config',
+        component: Config
+    }
+]
+
+const router = createRouter({ history: createWebHistory(), routes })
+export default router
diff --git a/src/views/config.vue b/src/views/config.vue
new file mode 100644
index 0000000..ed1d940
--- /dev/null
+++ b/src/views/config.vue
@@ -0,0 +1,3 @@
+<template>
+<h1>Config</h1>
+</template>
diff --git a/src/views/home.vue b/src/views/home.vue
new file mode 100644
index 0000000..24d6361
--- /dev/null
+++ b/src/views/home.vue
@@ -0,0 +1,3 @@
+<template>
+<h1>Home</h1>
+</template>
diff --git a/yarn.lock b/yarn.lock
index 406de2f..ba4947c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1532,6 +1532,11 @@
   optionalDependencies:
     "prettier" "^1.18.2"
 
+"@vue/devtools-api@^6.0.0-beta.10":
+  "integrity" "sha512-oZ0n/N4UWpkMvbR1OrBtu+YhaVADo+bYX5lxo9tou7h10p0+v2K9yzzaZATVr0lqHb7iY1wALfO8yojwg0MTHw=="
+  "resolved" "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.0.0-beta.13.tgz"
+  "version" "6.0.0-beta.13"
+
 "@vue/preload-webpack-plugin@^1.1.0":
   "integrity" "sha512-LIZMuJk38pk9U9Ur4YzHjlIyMuxPlACdBIHH9/nGYVTsaGKOSnSuELiE8vS9wa+dJpIYspYUOqk+L1Q4pgHQHQ=="
   "resolved" "https://registry.npmjs.org/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz"
@@ -9856,10 +9861,12 @@
     "vue-hot-reload-api" "^2.3.0"
     "vue-style-loader" "^4.1.0"
 
-"vue-router@^3.5.1":
-  "integrity" "sha512-RRQNLT8Mzr8z7eL4p7BtKvRaTSGdCbTy2+Mm5HTJvLGYSSeG9gDzNasJPP/yOYKLy+/cLG/ftrqq5fvkFwBJEw=="
-  "resolved" "https://registry.npmjs.org/vue-router/-/vue-router-3.5.1.tgz"
-  "version" "3.5.1"
+"vue-router@^4.0.8":
+  "integrity" "sha512-42mWSQaH7CCBQDspQTHv63f34VEnZC20g9QNK4WJ/zW8SdIUeT6TQ2i/78fjF/pVBUPLBWrGhvB7uDnaz7O/pA=="
+  "resolved" "https://registry.npmjs.org/vue-router/-/vue-router-4.0.8.tgz"
+  "version" "4.0.8"
+  dependencies:
+    "@vue/devtools-api" "^6.0.0-beta.10"
 
 "vue-style-loader@^4.1.0", "vue-style-loader@^4.1.2":
   "integrity" "sha512-sFuh0xfbtpRlKfm39ss/ikqs9AbKCoXZBpHeVZ8Tx650o0k0q/YCM7FRvigtxpACezfq6af+a7JeqVTWvncqDg=="