refactor: upgrade to vue-router4

This commit is contained in:
axolotle 2024-03-04 03:26:54 +01:00
parent f66a59df58
commit 74e08afff9
4 changed files with 23 additions and 25 deletions

View file

@ -22,7 +22,7 @@
"simple-evaluate": "^1.4.6", "simple-evaluate": "^1.4.6",
"vue": "3.3.4", "vue": "3.3.4",
"vue-i18n": "^8.28.2", "vue-i18n": "^8.28.2",
"vue-router": "^3.6.5", "vue-router": "^4.3.0",
"vue-showdown": "^2.4.1", "vue-showdown": "^2.4.1",
"vuelidate": "^0.7.7", "vuelidate": "^0.7.7",
"vuex": "^3.6.2" "vuex": "^3.6.2"

View file

@ -6,7 +6,6 @@
<BNavbarBrand <BNavbarBrand
:to="{ name: 'home' }" :to="{ name: 'home' }"
:disabled="waiting" :disabled="waiting"
exact
exact-active-class="active" exact-active-class="active"
> >
<span v-if="theme"> <span v-if="theme">
@ -45,10 +44,12 @@
<main id="main"> <main id="main">
<!-- The `key` on RouterView make sure that if a link points to a page that <!-- 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 --> use the same component as the previous one, it will be refreshed -->
<RouterView v-slot="{ Component }" :key="routerKey">
<Transition v-if="transitions" :name="transitionName"> <Transition v-if="transitions" :name="transitionName">
<RouterView class="animated" :key="routerKey" /> <Component :is="Component" class="animated" />
</Transition> </Transition>
<RouterView v-else class="static" :key="routerKey" /> <Component v-else :is="Component" class="static" />
</RouterView>
</main> </main>
</ViewLockOverlay> </ViewLockOverlay>

View file

@ -6,7 +6,6 @@
v-for="route in routes" v-for="route in routes"
:key="route.text" :key="route.text"
:to="route.to" :to="route.to"
exact
exact-active-class="active" exact-active-class="active"
> >
<YIcon v-if="route.icon" :iname="route.icon" /> <YIcon v-if="route.icon" :iname="route.icon" />
@ -16,7 +15,8 @@
</BCardHeader> </BCardHeader>
<!-- Bind extra props to the child view and forward child events to parent --> <!-- Bind extra props to the child view and forward child events to parent -->
<RouterView v-bind="$attrs" v-on="$listeners"> <RouterView v-slot="{ Component }">
<Component v-bind="$attrs" v-on="$listeners" :is="Component">
<template #tab-top> <template #tab-top>
<slot name="tab-top" /> <slot name="tab-top" />
</template> </template>
@ -26,6 +26,7 @@
<template #tab-after> <template #tab-after>
<slot name="tab-after" /> <slot name="tab-after" />
</template> </template>
</Component>
</RouterView> </RouterView>
</BCard> </BCard>
</template> </template>

View file

@ -1,13 +1,9 @@
import Vue from 'vue' import { createRouter, createWebHashHistory } from 'vue-router'
import VueRouter from 'vue-router'
import routes from './routes' import routes from './routes'
import store from '@/store' import store from '@/store'
Vue.use(VueRouter) const router = createRouter({
history: createWebHashHistory(import.meta.env.BASE_URL),
const router = new VueRouter({
// mode: 'history', // this allow all routes to be real ones (without '#')
base: import.meta.env.BASE_URL,
routes, routes,
scrollBehavior(to, from, savedPosition) { scrollBehavior(to, from, savedPosition) {
@ -22,7 +18,7 @@ const router = new VueRouter({
setTimeout(() => resolve(savedPosition), 0) setTimeout(() => resolve(savedPosition), 0)
}) })
} else { } else {
return savedPosition || { x: 0, y: 0 } return savedPosition || { left: 0, top: 0 }
} }
}, },
}) })