Programmatic navigation supports Promise style

[g-plane]

What problem does this feature solve?

Currently, a router instance has push and replace methods, and these two methods only support callback style, which they only accept callback as onComplete parameter and onAbort parameter. The push and replace methods themselves will return nothing.

I propose a new API which let push and replace methods return a Promise. This is just like how Vue.prototype.$nextTick behaves.

What does the proposed API look like?

For push and replace methods, if user provide a function as parameter and pass it to onComplete or onAbort parameter, just behave as same as current behavior.

However, if user doesn't provide those parameters, the push and replace should return a Promise like this:

router.push('/')
  .then(/* just do something like in `onComplete` here */)
  .catch(/* just do something like in `onAbort` here */)

This can let us use async/await:

try {
  await router.push('/')
  /* just do something like in `onComplete` here */
} catch {
  /* just do something like in `onAbort` here */
}

In the VueRouter's internal History instance, maybe the push method can be changed to:

push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
  const p = new Promise((resolve, reject) => {
    this.transitionTo(location, route => {
      this.stack = this.stack.slice(0, this.index + 1).concat(route)
      this.index++
      onComplete ? onComplete(route) : resolve(router)
    }, onAbort || reject)
  })
  if (!onComplete && !onAbort) {
    return p
  }
}

[posva]

Duplicate of #1769