Using Vue Router's `push()` method within an asynchronous function will solely modify the URL address

Question

Using Vue Router's `push()` method within an asynchronous function will solely modify the URL address

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

javascript vue.js vuejs3 vue-router

Answer 1

Answer №1

After much trial and error, I found success by utilizing Promise.then in place of using await with the Promise.

Here's a suggestion:

const navigateToNextPage = async () => {
    showRouteLoader().then(() => {
        router.push('bank-acount-info')
    })
}

Answer 2

After much trial and error, I found success by utilizing Promise.then in place of using await with the Promise.

Here's a suggestion:

const navigateToNextPage = async () => {
    showRouteLoader().then(() => {
        router.push('bank-acount-info')
    })
}

Using Vue Router's `push()` method within an asynchronous function will solely modify the URL address

Answer №1

Similar questions

Determine the percentage of payments, similar to Upwork, by leveraging the power

What is the best way to merge two interfaces and convert all of their fields to optional properties?

Creating a visual representation of the information stored in my JSON data file using a Quasar table

Increase the date and time by a specified number of days

Click on the sort icon in React JS to change its state

Fixing the "Package Manager Not Found" Issue when Deploying a Next.js Project on Vercel

Provide input to npm when running "my command" and utilize that input within my functions

The data in Node AngularJS is not loading upon the page's initial load

Transmitting PHP variable to JavaScript using Callback Method

Service error: The function of "method" is not valid

Creating a function for loading dynamic content in XSLT can be achieved by following these steps

Sort the inner array within an outer array

I am facing an issue where my Vue root file/component is not appearing in my Laravel project

Fullcalendar inaccurately displays events

Error during deployment on Vercel: Module 'build-rss.js' not found in workpath0 directory

Using jQuery to show and hide elements on a webpage

change the css back to its original state when a key is pressed

Successfully running npm update on a Mac seemed to have updated the package, however, the

Switch out everything except for the initial one

Continuous Playback of Sound