I created a custom loading component that displays while the route is being changed. To ensure the loading component properly waits for a second, the method needs to be asynchronous.
However, since implementing this feature, I noticed that the router.push() method sometimes only updates the URL without changing the corresponding component. This inconsistency occurs randomly, working correctly at times but failing at others.
In my App.vue file:
<template>
<component :is="layout || 'div'">
<router-view :key="$route.fullPath" />
<loading-spinner v-if="store.isRouteLoading"></loading-spinner>
</component>
</template>
Regarding the async push method:
const navigateToNextPage = async () => {
await showRouteLoader()
router.push('bank-acount-info')
}
Current package versions:
"vue": "^3.3.4",
"vue-router": "^4.2.1",