fix: make callback of next in beforeRouterEnter more consistent (#2738)

Fixes #2761
Closes #2728

examples/navigation-guards/app.js

@@ -38,7 +38,10 @@ const Baz = {
     </div>
   `,
   beforeRouteLeave (to, from, next) {
-    if (this.saved || window.confirm('Not saved, are you sure you want to navigate away?')) {
+    if (
+      this.saved ||
+      window.confirm('Not saved, are you sure you want to navigate away?')
+    ) {
       next()
     } else {
       next(false)
@@ -87,6 +90,43 @@ const Quux = {
   }
 }
 
+const NestedParent = {
+  template: `<div id="nested-parent">Nested Parent <hr>
+  <router-link to="/parent/child/1">/parent/child/1</router-link>
+  <router-link to="/parent/child/2">/parent/child/2</router-link>
+  <hr>
+  <p id="bre-order">
+    <span v-for="log in logs">{{ log }} </span>
+  </p>
+
+  <router-view/></div>`,
+  data: () => ({ logs: [] }),
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      vm.logs.push('parent')
+    })
+  }
+}
+
+const GuardMixin = {
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      vm.$parent.logs.push('mixin')
+    })
+  }
+}
+
+const NestedChild = {
+  props: ['n'],
+  template: `<div>Child {{ n }}</div>`,
+  mixins: [GuardMixin],
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      vm.$parent.logs.push('child ' + vm.n)
+    })
+  }
+}
+
 const router = new VueRouter({
   mode: 'history',
   base: __dirname,
@@ -107,14 +147,25 @@ const router = new VueRouter({
     { path: '/qux', component: Qux },
 
     // in-component beforeRouteEnter hook for async components
-    { path: '/qux-async', component: resolve => {
-      setTimeout(() => {
-        resolve(Qux)
-      }, 0)
-    } },
+    {
+      path: '/qux-async',
+      component: resolve => {
+        setTimeout(() => {
+          resolve(Qux)
+        }, 0)
+      }
+    },
 
     // in-component beforeRouteUpdate hook
-    { path: '/quux/:id', component: Quux }
+    { path: '/quux/:id', component: Quux },
+    {
+      path: '/parent',
+      component: NestedParent,
+      children: [
+        { path: 'child/1', component: NestedChild, props: { n: 1 }},
+        { path: 'child/2', component: NestedChild, props: { n: 2 }}
+      ]
+    }
   ]
 })
 
@@ -140,6 +191,7 @@ new Vue({
         <li><router-link to="/qux-async">/qux-async</router-link></li>
         <li><router-link to="/quux/1">/quux/1</router-link></li>
         <li><router-link to="/quux/2">/quux/2</router-link></li>
+        <li><router-link to="/parent/child/2">/parent/child/2</router-link></li>
       </ul>
       <router-view class="view"></router-view>
     </div>

src/history/base.js

@@ -297,7 +297,6 @@ function bindEnterGuard (
 ): NavigationGuard {
   return function routeEnterGuard (to, from, next) {
     return guard(to, from, cb => {
-      next(cb)
       if (typeof cb === 'function') {
         cbs.push(() => {
           // #750
@@ -308,6 +307,7 @@ function bindEnterGuard (
           poll(cb, match.instances, key, isValid)
         })
       }
+      next(cb)
     })
   }
 }

test/e2e/specs/navigation-guards.js

@@ -3,7 +3,7 @@ module.exports = {
     browser
       .url('http://localhost:8080/navigation-guards/')
       .waitForElementVisible('#app', 1000)
-      .assert.count('li a', 8)
+      .assert.count('li a', 9)
       .assert.containsText('.view', 'home')
 
     // alert commands not available in phantom
@@ -137,6 +137,18 @@ module.exports = {
       .click('li:nth-child(7) a')
       .assert.urlEquals('http://localhost:8080/navigation-guards/quux/1')
       .assert.containsText('.view', 'id:1 prevId:2')
+
+      // beforeRouteEnter order in children
+      .click('li:nth-child(9) a')
+      .assert.urlEquals(
+        'http://localhost:8080/navigation-guards/parent/child/2'
+      )
+      .assert.containsText('#bre-order', 'parent mixin child 2')
+      .click('#nested-parent a')
+      .assert.urlEquals(
+        'http://localhost:8080/navigation-guards/parent/child/1'
+      )
+      .assert.containsText('#bre-order', 'parent mixin child 2 mixin child 1')
       .end()
   }
 }