feat: add beforeRouteUpdate hook (close #938)

Author: yyx990803

src/history/base.js

@@ -55,6 +55,7 @@ export class History {
     }
 
     const {
+      updated,
       deactivated,
       activated
     } = resolveQueue(this.current.matched, route.matched)
@@ -64,7 +65,9 @@ export class History {
       extractLeaveGuards(deactivated),
       // global before hooks
       this.router.beforeHooks,
-      // enter guards
+      // in-component update hooks
+      extractUpdateHooks(updated),
+      // in-config enter guards
       activated.map(m => m.beforeEnter),
       // async components
       resolveAsyncComponents(activated)
@@ -93,9 +96,8 @@ export class History {
 
     runQueue(queue, iterator, () => {
       const postEnterCbs = []
-      const enterGuards = extractEnterGuards(activated, postEnterCbs, () => {
-        return this.current === route
-      })
+      const isValid = () => this.current === route
+      const enterGuards = extractEnterGuards(activated, postEnterCbs, isValid)
       // wait until async components are resolved before
       // extracting in-component enter guards
       runQueue(enterGuards, iterator, () => {
@@ -145,6 +147,7 @@ function resolveQueue (
   current: Array<RouteRecord>,
   next: Array<RouteRecord>
 ): {
+  updated: Array<RouteRecord>,
   activated: Array<RouteRecord>,
   deactivated: Array<RouteRecord>
 } {
@@ -156,11 +159,29 @@ function resolveQueue (
     }
   }
   return {
+    updated: next.slice(0, i),
     activated: next.slice(i),
     deactivated: current.slice(i)
   }
 }
 
+function extractGuards (
+  records: Array<RouteRecord>,
+  name: string,
+  bind: Function,
+  reverse?: boolean
+): Array<?Function> {
+  const guards = flatMapComponents(records, (def, instance, match, key) => {
+    const guard = extractGuard(def, name)
+    if (guard) {
+      return Array.isArray(guard)
+        ? guard.map(guard => bind(guard, instance, match, key))
+        : bind(guard, instance, match, key)
+    }
+  })
+  return flatten(reverse ? guards.reverse() : guards)
+}
+
 function extractGuard (
   def: Object | Function,
   key: string
@@ -172,46 +193,35 @@ function extractGuard (
   return def.options[key]
 }
 
-function extractLeaveGuards (matched: Array<RouteRecord>): Array<?Function> {
-  return flatten(flatMapComponents(matched, (def, instance) => {
-    const guard = extractGuard(def, 'beforeRouteLeave')
-    if (guard) {
-      return Array.isArray(guard)
-        ? guard.map(guard => wrapLeaveGuard(guard, instance))
-        : wrapLeaveGuard(guard, instance)
-    }
-  }).reverse())
+function extractLeaveGuards (deactivated: Array<RouteRecord>): Array<?Function> {
+  return extractGuards(deactivated, 'beforeRouteLeave', bindGuard, true)
 }
 
-function wrapLeaveGuard (
-  guard: NavigationGuard,
-  instance: _Vue
-): NavigationGuard {
-  return function routeLeaveGuard () {
+function extractUpdateHooks (updated: Array<RouteRecord>): Array<?Function> {
+  return extractGuards(updated, 'beforeRouteUpdate', bindGuard)
+}
+
+function bindGuard (guard: NavigationGuard, instance: _Vue): NavigationGuard {
+  return function boundRouteGuard () {
     return guard.apply(instance, arguments)
   }
 }
 
 function extractEnterGuards (
-  matched: Array<RouteRecord>,
+  activated: Array<RouteRecord>,
   cbs: Array<Function>,
   isValid: () => boolean
 ): Array<?Function> {
-  return flatten(flatMapComponents(matched, (def, _, match, key) => {
-    const guard = extractGuard(def, 'beforeRouteEnter')
-    if (guard) {
-      return Array.isArray(guard)
-        ? guard.map(guard => wrapEnterGuard(guard, cbs, match, key, isValid))
-        : wrapEnterGuard(guard, cbs, match, key, isValid)
-    }
-  }))
+  return extractGuards(activated, 'beforeRouteEnter', (guard, _, match, key) => {
+    return bindEnterGuard(guard, match, key, cbs, isValid)
+  })
 }
 
-function wrapEnterGuard (
+function bindEnterGuard (
   guard: NavigationGuard,
-  cbs: Array<Function>,
   match: RouteRecord,
   key: string,
+  cbs: Array<Function>,
   isValid: () => boolean
 ): NavigationGuard {
   return function routeEnterGuard (to, from, next) {

types/vue.d.ts

@@ -18,5 +18,6 @@ declare module "vue/types/options" {
     router?: VueRouter;
     beforeRouteEnter?: NavigationGuard;
     beforeRouteLeave?: NavigationGuard;
+    beforeRouteUpdate?: NavigationGuard;
   }
 }