implement router.onReady

Author: yyx990803

src/history/base.js

@@ -13,6 +13,8 @@ export class History {
   current: Route;
   pending: ?Route;
   cb: (r: Route) => void;
+  ready: boolean;
+  readyCbs: Array<Function>;
 
   // implemented by sub-classes
   go: (n: number) => void;
@@ -27,18 +29,36 @@ export class History {
     // start with a route object that stands for "nowhere"
     this.current = START
     this.pending = null
+    this.ready = false
+    this.readyCbs = []
   }
 
   listen (cb: Function) {
     this.cb = cb
   }
 
+  onReady (cb: Function) {
+    if (this.ready) {
+      cb()
+    } else {
+      this.readyCbs.push(cb)
+    }
+  }
+
   transitionTo (location: RawLocation, onComplete?: Function, onAbort?: Function) {
     const route = this.router.match(location, this.current)
     this.confirmTransition(route, () => {
       this.updateRoute(route)
       onComplete && onComplete(route)
       this.ensureURL()
+
+      // fire ready cbs once
+      if (!this.ready) {
+        this.ready = true
+        this.readyCbs.forEach(cb => {
+          cb(route)
+        })
+      }
     }, onAbort)
   }
 

src/index.js

@@ -19,6 +19,8 @@ export default class VueRouter {
 
   app: any;
   apps: Array<any>;
+  ready: boolean;
+  readyCbs: Array<Function>;
   options: RouterOptions;
   mode: string;
   history: HashHistory | HTML5History | AbstractHistory;
@@ -112,6 +114,10 @@ export default class VueRouter {
     this.afterHooks.push(fn)
   }
 
+  onReady (cb: Function) {
+    this.history.onReady(cb)
+  }
+
   push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
     this.history.push(location, onComplete, onAbort)
   }

test/unit/specs/add-routes.spec.js

@@ -0,0 +1,147 @@
+import Router from '../../../src/index'
+
+describe('router.onReady', () => {
+  it('should work', done => {
+    const calls = []
+
+    const router = new Router({
+      mode: 'abstract',
+      routes: [
+        {
+          path: '/a',
+          component: {
+            name: 'A',
+            beforeRouteEnter: (to, from, next) => {
+              setTimeout(() => {
+                calls.push(2)
+                next()
+              }, 1)
+            }
+          }
+        }
+      ]
+    })
+
+    router.beforeEach((to, from, next) => {
+      setTimeout(() => {
+        calls.push(1)
+        next()
+      }, 1)
+    })
+
+    router.onReady(() => {
+      expect(calls).toEqual([1, 2])
+      // sync call when already ready
+      router.onReady(() => {
+        calls.push(3)
+      })
+      expect(calls).toEqual([1, 2, 3])
+      done()
+    })
+
+    router.push('/a')
+    expect(calls).toEqual([])
+  })
+})
+
+describe('router.addRoutes', () => {
+  it('should work', () => {
+    const router = new Router({
+      mode: 'abstract',
+      routes: [
+        { path: '/a', component: { name: 'A' }}
+      ]
+    })
+
+    router.push('/a')
+    let components = router.getMatchedComponents()
+    expect(components.length).toBe(1)
+    expect(components[0].name).toBe('A')
+
+    router.push('/b')
+    components = router.getMatchedComponents()
+    expect(components.length).toBe(0)
+
+    router.addRoutes([
+      { path: '/b', component: { name: 'B' }}
+    ])
+    components = router.getMatchedComponents()
+    expect(components.length).toBe(1)
+    expect(components[0].name).toBe('B')
+
+    // make sure it preserves previous routes
+    router.push('/a')
+    components = router.getMatchedComponents()
+    expect(components.length).toBe(1)
+    expect(components[0].name).toBe('A')
+  })
+})
+
+describe('router.push/replace 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()
+    })
+  })
+})