From 74e08afff9d78bd941b0014613d232c6157f4d10 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 4 Mar 2024 03:26:54 +0100
Subject: [PATCH] refactor: upgrade to vue-router4

---
 app/package.json                    |  2 +-
 app/src/App.vue                     | 11 ++++++-----
 app/src/components/RoutableTabs.vue | 23 ++++++++++++-----------
 app/src/router/index.js             | 12 ++++--------
 4 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/app/package.json b/app/package.json
index a68da12f..2ae083bb 100644
--- a/app/package.json
+++ b/app/package.json
@@ -22,7 +22,7 @@
     "simple-evaluate": "^1.4.6",
     "vue": "3.3.4",
     "vue-i18n": "^8.28.2",
-    "vue-router": "^3.6.5",
+    "vue-router": "^4.3.0",
     "vue-showdown": "^2.4.1",
     "vuelidate": "^0.7.7",
     "vuex": "^3.6.2"
diff --git a/app/src/App.vue b/app/src/App.vue
index b45efeb9..c4da2555 100644
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -6,7 +6,6 @@
         <BNavbarBrand
           :to="{ name: 'home' }"
           :disabled="waiting"
-          exact
           exact-active-class="active"
         >
           <span v-if="theme">
@@ -45,10 +44,12 @@
       <main id="main">
         <!-- The `key` on RouterView make sure that if a link points to a page that
         use the same component as the previous one, it will be refreshed -->
-        <Transition v-if="transitions" :name="transitionName">
-          <RouterView class="animated" :key="routerKey" />
-        </Transition>
-        <RouterView v-else class="static" :key="routerKey" />
+        <RouterView v-slot="{ Component }" :key="routerKey">
+          <Transition v-if="transitions" :name="transitionName">
+            <Component :is="Component" class="animated" />
+          </Transition>
+          <Component v-else :is="Component" class="static" />
+        </RouterView>
       </main>
     </ViewLockOverlay>
 
diff --git a/app/src/components/RoutableTabs.vue b/app/src/components/RoutableTabs.vue
index dfeff852..65144624 100644
--- a/app/src/components/RoutableTabs.vue
+++ b/app/src/components/RoutableTabs.vue
@@ -6,7 +6,6 @@
           v-for="route in routes"
           :key="route.text"
           :to="route.to"
-          exact
           exact-active-class="active"
         >
           <YIcon v-if="route.icon" :iname="route.icon" />
@@ -16,16 +15,18 @@
     </BCardHeader>
 
     <!-- Bind extra props to the child view and forward child events to parent -->
-    <RouterView v-bind="$attrs" v-on="$listeners">
-      <template #tab-top>
-        <slot name="tab-top" />
-      </template>
-      <template #tab-before>
-        <slot name="tab-before" />
-      </template>
-      <template #tab-after>
-        <slot name="tab-after" />
-      </template>
+    <RouterView v-slot="{ Component }">
+      <Component v-bind="$attrs" v-on="$listeners" :is="Component">
+        <template #tab-top>
+          <slot name="tab-top" />
+        </template>
+        <template #tab-before>
+          <slot name="tab-before" />
+        </template>
+        <template #tab-after>
+          <slot name="tab-after" />
+        </template>
+      </Component>
     </RouterView>
   </BCard>
 </template>
diff --git a/app/src/router/index.js b/app/src/router/index.js
index dcb54734..8af04f87 100644
--- a/app/src/router/index.js
+++ b/app/src/router/index.js
@@ -1,13 +1,9 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
+import { createRouter, createWebHashHistory } from 'vue-router'
 import routes from './routes'
 import store from '@/store'
 
-Vue.use(VueRouter)
-
-const router = new VueRouter({
-  // mode: 'history', // this allow all routes to be real ones (without '#')
-  base: import.meta.env.BASE_URL,
+const router = createRouter({
+  history: createWebHashHistory(import.meta.env.BASE_URL),
   routes,
 
   scrollBehavior(to, from, savedPosition) {
@@ -22,7 +18,7 @@ const router = new VueRouter({
         setTimeout(() => resolve(savedPosition), 0)
       })
     } else {
-      return savedPosition || { x: 0, y: 0 }
+      return savedPosition || { left: 0, top: 0 }
     }
   },
 })