support multiple global before/after hooks

Author: yyx990803

src/index.js

@@ -57,8 +57,8 @@ export default class Router {
     this._currentTransition = null
     this._previousTransition = null
     this._notFoundHandler = null
-    this._beforeEachHook = null
-    this._afterEachHook = null
+    this._beforeEachHooks = []
+    this._afterEachHooks = []
 
     // feature detection
     this._hasPushState =

src/router/api.js

@@ -65,7 +65,7 @@ export default function (Vue, Router) {
    */
 
   Router.prototype.beforeEach = function (fn) {
-    this._beforeEachHook = fn
+    this._beforeEachHooks.push(fn)
   }
 
   /**
@@ -75,7 +75,7 @@ export default function (Vue, Router) {
    */
 
   Router.prototype.afterEach = function (fn) {
-    this._afterEachHook = fn
+    this._afterEachHooks.push(fn)
   }
 
   /**

src/router/internal.js

@@ -150,15 +150,19 @@ export default function (Vue, Router) {
     }
 
     // check global before hook
-    let before = this._beforeEachHook
+    let beforeHooks = this._beforeEachHooks
     let startTransition = () => {
       transition.start(() => {
         this._postTransition(route, state, anchor)
       })
     }
 
-    if (before) {
-      transition.callHook(before, null, startTransition, true)
+    if (beforeHooks.length) {
+      transition.runQueue(beforeHooks, (hook, _, next) => {
+        if (transition === this._currentTransition) {
+          transition.callHook(hook, null, next, true)
+        }
+      }, startTransition)
     } else {
       startTransition()
     }
@@ -195,11 +199,11 @@ export default function (Vue, Router) {
       })
     }
     // call global after hook
-    if (this._afterEachHook) {
-      this._afterEachHook.call(null, {
+    if (this._afterEachHooks.length) {
+      this._afterEachHooks.forEach(hook => hook.call(null, {
         to: transition.to,
         from: transition.from
-      })
+      }))
     }
   }
 

test/unit/specs/core.js

@@ -416,34 +416,55 @@ describe('Core', function () {
         }
       }
     })
-    var spy = jasmine.createSpy()
+
+    var spy1 = jasmine.createSpy('before hook 1')
+    router.beforeEach(function (transition) {
+      spy1()
+      setTimeout(function () {
+        transition.next()
+      }, wait)
+    })
+
+    var spy2 = jasmine.createSpy('before hook 2')
     router.beforeEach(function (transition) {
-      spy()
+      spy2()
       if (transition.to.path === '/no') {
         setTimeout(function () {
           transition.abort()
           next()
-        }, 100)
+        }, wait)
       } else if (transition.to.path.indexOf('/redirect') > -1) {
         setTimeout(function () {
           transition.redirect('/to/:id')
           next2()
-        }, 100)
+        }, wait)
       } else {
         transition.next()
       }
     })
+
     router.start(App, el)
-    expect(spy).toHaveBeenCalled()
-    expect(router.app.$el.textContent).toBe('default')
-    router.go('/no')
+    expect(spy1).toHaveBeenCalled()
+    expect(spy2).not.toHaveBeenCalled()
+    expect(router.app.$el.textContent).toBe('')
+    setTimeout(function () {
+      expect(spy2).toHaveBeenCalled()
+      expect(router.app.$el.textContent).toBe('default')
+      router.go('/no')
+    }, wait * 2)
     function next () {
+      expect(spy1.calls.count()).toBe(2)
+      expect(spy2.calls.count()).toBe(2)
       expect(router.app.$el.textContent).toBe('default')
       router.go('/redirect/12345')
     }
     function next2 () {
-      expect(router.app.$el.textContent).toBe('to 12345')
-      done()
+      expect(spy1.calls.count()).toBe(4) // go + redirect
+      expect(spy2.calls.count()).toBe(3) // only go at this moment
+      setTimeout(function () {
+        expect(router.app.$el.textContent).toBe('to 12345')
+        done()
+      }, wait * 2)
     }
   })