Feat: basic routing

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",
+      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.8.tgz",
-      "integrity": "sha512-RRQNLT8Mzr8z7eL4p7BtKvRaTSGdCbTy2+Mm5HTJvLGYSSeG9gDzNasJPP/yOYKLy+/cLG/ftrqq5fvkFwBJEw=="
+      "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",
+      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.1.tgz",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.8.tgz",
-      "integrity": "sha512-RRQNLT8Mzr8z7eL4p7BtKvRaTSGdCbTy2+Mm5HTJvLGYSSeG9gDzNasJPP/yOYKLy+/cLG/ftrqq5fvkFwBJEw=="
+      "integrity": "sha512-42mWSQaH7CCBQDspQTHv63f34VEnZC20g9QNK4WJ/zW8SdIUeT6TQ2i/78fjF/pVBUPLBWrGhvB7uDnaz7O/pA==",
+      "requires": {
+        "@vue/devtools-api": "^6.0.0-beta.10"
+      }
     },
     "vue-style-loader": {
       "version": "4.1.3",

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",

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
   }
 }

src/components/nav.vue

@@ -1,9 +1,7 @@
 <template>
   <nav>
-  <ul>
+  <router-link to="/"> Home </router-link>
-      <li>Plop</li>
+  <router-link to="/config"> Config </router-link>
-      <li>Pipo</li>
-  </ul>
   </nav>
 </template>
 

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')

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

src/views/config.vue

@@ -0,0 +1,3 @@
+<template>
+<h1>Config</h1>
+</template>

src/views/home.vue

@@ -0,0 +1,3 @@
+<template>
+<h1>Home</h1>
+</template>

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":
+"vue-router@^4.0.8":
-  "integrity" "sha512-RRQNLT8Mzr8z7eL4p7BtKvRaTSGdCbTy2+Mm5HTJvLGYSSeG9gDzNasJPP/yOYKLy+/cLG/ftrqq5fvkFwBJEw=="
+  "integrity" "sha512-42mWSQaH7CCBQDspQTHv63f34VEnZC20g9QNK4WJ/zW8SdIUeT6TQ2i/78fjF/pVBUPLBWrGhvB7uDnaz7O/pA=="
-  "resolved" "https://registry.npmjs.org/vue-router/-/vue-router-3.5.1.tgz"
+  "resolved" "https://registry.npmjs.org/vue-router/-/vue-router-4.0.8.tgz"
-  "version" "3.5.1"
+  "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=="