support beforeRouteEnter inside components

Author: yyx990803

examples/navigation-guards/app.js

@@ -39,6 +39,31 @@ const Baz = {
   }
 }
 
+// Baz implements an in-component beforeRouteEnter hook
+const Qux = {
+  data () {
+    return {
+      msg: null
+    }
+  },
+  template: `<div>{{ msg }}</div>`,
+  beforeRouteEnter (route, redirect, next) {
+    // Note that enter hooks do not have access to `this`
+    // because it is called before the component is even created.
+    // However, we can provide a callback to `next` which will
+    // receive the vm instance when the route has been confirmed.
+    //
+    // simulate an async data fetch.
+    // this pattern is useful when you want to stay at current route
+    // and only switch after the data has been fetched.
+    setTimeout(() => {
+      next(vm => {
+        vm.msg = 'Qux'
+      })
+    }, 300)
+  }
+}
+
 const router = new VueRouter({
   mode: 'history',
   base: __dirname,
@@ -53,7 +78,10 @@ const router = new VueRouter({
     { path: '/bar', component: Bar, meta: { needGuard: true }},
 
     // Baz implements an in-component beforeRouteLeave hook
-    { path: '/baz', component: Baz }
+    { path: '/baz', component: Baz },
+
+    // Qux implements an in-component beforeRouteEnter hook
+    { path: '/qux', component: Qux }
   ]
 })
 
@@ -75,6 +103,7 @@ new Vue({
         <li><router-link to="/foo">/foo</router-link></li>
         <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>
       </ul>
       <router-view class="view"></router-view>
     </div>

src/history/base.js

@@ -51,15 +51,18 @@ export class History {
       activated
     } = resolveQueue(this.current.matched, route.matched)
 
+    const postEnterCbs = []
     const queue = [].concat(
-      // deactivate guards
+      // in-component leave guards
       extractLeaveGuards(deactivated),
       // global before hooks
       this.router.beforeHooks,
-      // activate guards
+      // enter guards
       activated.map(m => m.beforeEnter),
       // async components
-      resolveAsyncComponents(activated)
+      resolveAsyncComponents(activated),
+      // in-component enter guards
+      extractEnterGuards(activated, postEnterCbs)
     ).filter(_ => _)
 
     this.pending = route
@@ -72,6 +75,9 @@ export class History {
         if (isSameRoute(route, this.pending)) {
           this.pending = null
           cb(route)
+          this.router.app.$nextTick(() => {
+            postEnterCbs.forEach(cb => cb())
+          })
         }
       }
     )
@@ -128,13 +134,29 @@ function extractLeaveGuards (matched: Array<RouteRecord>): Array<?Function> {
   return flatMapComponents(matched, (def, instance) => {
     const guard = def && def.beforeRouteLeave
     if (guard) {
-      return function routeGuard () {
+      return function routeLeaveGuard () {
         return guard.apply(instance, arguments)
       }
     }
   }).reverse()
 }
 
+function extractEnterGuards (matched: Array<RouteRecord>, cbs: Array<Function>): Array<?Function> {
+  return flatMapComponents(matched, (def, _, match, key) => {
+    const guard = def && def.beforeRouteEnter
+    if (guard) {
+      return function routeEnterGuard (route, redirect, next) {
+        return guard(route, redirect, cb => {
+          next()
+          cb && cbs.push(() => {
+            cb(match.instances[key] && match.instances[key].child)
+          })
+        })
+      }
+    }
+  })
+}
+
 function resolveAsyncComponents (matched: Array<RouteRecord>): Array<?Function> {
   return flatMapComponents(matched, (def, _, match, key) => {
     // if it's a function and doesn't have Vue options attached,

src/index.js

@@ -49,6 +49,8 @@ export default class VueRouter {
       `before creating root instance.`
     )
 
+    this.app = app
+
     const { mode, options, fallback } = this
     switch (mode) {
       case 'history':
@@ -64,7 +66,6 @@ export default class VueRouter {
         assert(false, `invalid mode: ${mode}`)
     }
 
-    this.app = app
     this.history.listen(route => {
       this.app._route = route
     })

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', 4)
+      .assert.count('li a', 5)
       .assert.containsText('.view', 'home')
 
       .click('li:nth-child(2) a')
@@ -100,6 +100,13 @@ module.exports = {
       .acceptAlert()
       .assert.urlEquals('http://localhost:8080/navigation-guards/bar')
       .assert.containsText('.view', 'bar')
+
+    .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')
       .end()
   }
 }