refactor: upgrade to vue-router4

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"

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>
 

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>

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