fix in-component enter guard for async components (fix #625)

Author: yyx990803

examples/navigation-guards/app.js

@@ -81,7 +81,14 @@ const router = new VueRouter({
     { path: '/baz', component: Baz },
 
     // Qux implements an in-component beforeRouteEnter hook
-    { path: '/qux', component: Qux }
+    { path: '/qux', component: Qux },
+
+   // in-component beforeRouteEnter hook for async components
+    { path: '/qux-async', component: resolve => {
+      setTimeout(() => {
+        resolve(Qux)
+      }, 0)
+    } }
   ]
 })
 
@@ -104,6 +111,7 @@ new Vue({
         <li><router-link to="/bar">/bar</router-link></li>
         <li><router-link to="/baz">/baz</router-link></li>
         <li><router-link to="/qux">/qux</router-link></li>
+        <li><router-link to="/qux-async">/qux-async</router-link></li>
       </ul>
       <router-view class="view"></router-view>
     </div>

src/history/base.js

@@ -51,7 +51,6 @@ export class History {
       activated
     } = resolveQueue(this.current.matched, route.matched)
 
-    const postEnterCbs = []
     const queue = [].concat(
       // in-component leave guards
       extractLeaveGuards(deactivated),
@@ -60,27 +59,27 @@ export class History {
       // enter guards
       activated.map(m => m.beforeEnter),
       // async components
-      resolveAsyncComponents(activated),
-      // in-component enter guards
-      extractEnterGuards(activated, postEnterCbs)
-    ).filter(_ => _)
+      resolveAsyncComponents(activated)
+    )
 
     this.pending = route
     const redirect = location => this.push(location)
+    const iterator = (hook, next) => hook(route, redirect, next)
 
-    runQueue(
-      queue,
-      (hook, next) => { hook(route, redirect, next) },
-      () => {
+    runQueue(queue, iterator, () => {
+      const postEnterCbs = []
+      // wait until async components are resolved before
+      // extracting in-component enter guards
+      runQueue(extractEnterGuards(activated, postEnterCbs), iterator, () => {
         if (isSameRoute(route, this.pending)) {
           this.pending = null
           cb(route)
           this.router.app.$nextTick(() => {
             postEnterCbs.forEach(cb => cb())
           })
         }
-      }
-    )
+      })
+    })
   }
 
   updateRoute (route: Route) {

src/util/async.js

@@ -5,9 +5,13 @@ export function runQueue (queue: Array<any>, fn: Function, cb: Function) {
     if (index >= queue.length) {
       cb()
     } else {
-      fn(queue[index], () => {
+      if (queue[index]) {
+        fn(queue[index], () => {
+          step(index + 1)
+        })
+      } else {
         step(index + 1)
-      })
+      }
     }
   }
   step(0)

test/e2e/specs/navigation-guards.js

@@ -8,7 +8,7 @@ module.exports = {
     browser
     .url('http://localhost:8080/navigation-guards/')
       .waitForElementVisible('#app', 1000)
-      .assert.count('li a', 5)
+      .assert.count('li a', 6)
       .assert.containsText('.view', 'home')
 
       .click('li:nth-child(2) a')
@@ -101,12 +101,24 @@ module.exports = {
       .assert.urlEquals('http://localhost:8080/navigation-guards/bar')
       .assert.containsText('.view', 'bar')
 
+    // in-component guard
     .click('li:nth-child(5) a')
       .assert.urlEquals('http://localhost:8080/navigation-guards/bar')
       .assert.containsText('.view', 'bar')
       .waitFor(300)
       .assert.urlEquals('http://localhost:8080/navigation-guards/qux')
       .assert.containsText('.view', 'Qux')
+
+    // async component + in-component guard
+    .click('li:nth-child(1) a')
+      .assert.urlEquals('http://localhost:8080/navigation-guards/')
+      .assert.containsText('.view', 'home')
+    .click('li:nth-child(6) a')
+      .assert.urlEquals('http://localhost:8080/navigation-guards/')
+      .assert.containsText('.view', 'home')
+      .waitFor(300)
+      .assert.urlEquals('http://localhost:8080/navigation-guards/qux-async')
+      .assert.containsText('.view', 'Qux')
       .end()
   }
 }