Vue-router: router.push & router.replace to return promise if callbacks are not provided

Created on 27 Sep 2017 · 6Comments · Source: vuejs/vue-router

What problem does this feature solve?

It would help preventing callback hell... Would be more consistent with vue js api...

What does the proposed API look like?

router.push('/new/url').then(() => doSomeCoolStuff())

feature request

Source

charles-mathieus-jomedia

👍19

Most helpful comment

Here's a simple helper function in the mean time...

/**
 * Async push method
 */
router.pushAsync = function(route) {
  return new Promise((resolve, reject) => {
    router.push(route, resolve, reject);
  });
};

adamreisnz on 16 Apr 2019

👍4

All 6 comments

This seems to work fine if for example your component is expecting an event.

methods: {
  asyncRouterPush (route) {
    return new Promise(resolve => {
      resolve(this.$router.push({ path: route }))
    })
  },
  doSomething (myVar) {
    this.asyncRouterPush(myVar)
      .then(() => {
        this.$root.$emit('someEvent')
      })
  }
}

belmarca on 15 Mar 2019

Any progress on this? Seems a bit backwards in 2019 that we still have to use a callback API, and can't simply await router.push().

adamreisnz on 16 Apr 2019

Here's a simple helper function in the mean time...

/**
 * Async push method
 */
router.pushAsync = function(route) {
  return new Promise((resolve, reject) => {
    router.push(route, resolve, reject);
  });
};

adamreisnz on 16 Apr 2019

👍4

I will try implement this issue.

Mighty683 on 30 Jul 2019

The problem is UnhandledPromiseRejectionWarning if we dont implement catch for previous implementations.

router.push should throw error on route abort? Or should resolve with undefined on route abort?

https://github.com/vuejs/vue/blob/dev/src/core/util/next-tick.js should I implement this similar to nextTick?

Mighty683 on 30 Jul 2019

Yes, it's similar to nextTick. It must work when Promises are not supported. The behavior only changes when no callback is passed and there is support for Promises