feat: support onComplete and onAbort callbacks for router.push and router.replace

Author: yyx990803

src/history/abstract.js

@@ -13,17 +13,19 @@ export class AbstractHistory extends History {
     this.index = -1
   }
 
-  push (location: RawLocation) {
+  push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
     this.transitionTo(location, route => {
       this.stack = this.stack.slice(0, this.index + 1).concat(route)
       this.index++
-    })
+      onComplete && onComplete(route)
+    }, onAbort)
   }
 
-  replace (location: RawLocation) {
+  replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
     this.transitionTo(location, route => {
       this.stack = this.stack.slice(0, this.index).concat(route)
-    })
+      onComplete && onComplete(route)
+    }, onAbort)
   }
 
   go (n: number) {

src/history/hash.js

@@ -34,16 +34,18 @@ export class HashHistory extends History {
     })
   }
 
-  push (location: RawLocation) {
+  push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
     this.transitionTo(location, route => {
       pushHash(route.fullPath)
-    })
+      onComplete && onComplete(route)
+    }, onAbort)
   }
 
-  replace (location: RawLocation) {
+  replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
     this.transitionTo(location, route => {
       replaceHash(route.fullPath)
-    })
+      onComplete && onComplete(route)
+    }, onAbort)
   }
 
   go (n: number) {

src/history/html5.js

@@ -47,20 +47,22 @@ export class HTML5History extends History {
     window.history.go(n)
   }
 
-  push (location: RawLocation) {
+  push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
     const current = this.current
     this.transitionTo(location, route => {
       pushState(cleanPath(this.base + route.fullPath))
       this.handleScroll(route, current, false)
-    })
+      onComplete && onComplete(route)
+    }, onAbort)
   }
 
-  replace (location: RawLocation) {
+  replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
     const current = this.current
     this.transitionTo(location, route => {
       replaceState(cleanPath(this.base + route.fullPath))
       this.handleScroll(route, current, false)
-    })
+      onComplete && onComplete(route)
+    }, onAbort)
   }
 
   ensureURL (push?: boolean) {

src/index.js

@@ -101,12 +101,12 @@ export default class VueRouter {
     this.afterHooks.push(fn)
   }
 
-  push (location: RawLocation) {
-    this.history.push(location)
+  push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
+    this.history.push(location, onComplete, onAbort)
   }
 
-  replace (location: RawLocation) {
-    this.history.replace(location)
+  replace (location: RawLocation, onComplete?: Function, onAbort?: Function) {
+    this.history.replace(location, onComplete, onAbort)
   }
 
   go (n: number) {

test/unit/specs/navigation-callback.spec.js

@@ -0,0 +1,70 @@
+import Router from '../../../src/index'
+
+fdescribe('Programmatic navigation callbacks', () => {
+  let calls = []
+  let router, spy1, spy2
+
+  const Foo = {
+    beforeRouteEnter (to, from, next) {
+      calls.push(3)
+      setTimeout(() => {
+        calls.push(4)
+        next()
+      }, 1)
+    }
+  }
+
+  beforeEach(() => {
+    calls = []
+    spy1 = jasmine.createSpy('complete')
+    spy2 = jasmine.createSpy('abort')
+
+    router = new Router({
+      routes: [
+        { path: '/foo', component: Foo }
+      ]
+    })
+
+    router.beforeEach((to, from, next) => {
+      calls.push(1)
+      setTimeout(() => {
+        calls.push(2)
+        next()
+      }, 1)
+    })
+  })
+
+  it('push complete', done => {
+    router.push('/foo', () => {
+      expect(calls).toEqual([1, 2, 3, 4])
+      done()
+    })
+  })
+
+  it('push abort', done => {
+    router.push('/foo', spy1, spy2)
+    router.push('/bar', () => {
+      expect(calls).toEqual([1, 1, 2, 2])
+      expect(spy1).not.toHaveBeenCalled()
+      expect(spy2).toHaveBeenCalled()
+      done()
+    })
+  })
+
+  it('replace complete', done => {
+    router.replace('/foo', () => {
+      expect(calls).toEqual([1, 2, 3, 4])
+      done()
+    })
+  })
+
+  it('replace abort', done => {
+    router.replace('/foo', spy1, spy2)
+    router.replace('/bar', () => {
+      expect(calls).toEqual([1, 1, 2, 2])
+      expect(spy1).not.toHaveBeenCalled()
+      expect(spy2).toHaveBeenCalled()
+      done()
+    })
+  })
+})

types/router.d.ts

@@ -22,8 +22,8 @@ declare class VueRouter {
 
   beforeEach (guard: NavigationGuard): void;
   afterEach (hook: (to: Route, from: Route) => any): void;
-  push (location: RawLocation): void;
-  replace (location: RawLocation): void;
+  push (location: RawLocation, onComplete?: Function, onAbort?: Function): void;
+  replace (location: RawLocation, onComplete?: Function, onAbort?: Function): void;
   go (n: number): void;
   back (): void;
   forward (): void;