fix: cb called before data init in keep-alive view and mixin guards n…

…ot being called
vuejs · posva · Oct 6, 2020 · Aug 7, 2019 · Aug 8, 2019 · Aug 8, 2019
commit 062a5aa29c2b1dae5b08d585608f82fb62c5dede
diff --git a/flow/declarations.js b/flow/declarations.js
@@ -68,7 +68,7 @@ declare type RouteRecord = {
   regex: RouteRegExp;
   components: Dictionary<any>;
   instances: Dictionary<any>;
-  pendingCbs: Dictionary<Function>;
+  pendingCbs: Dictionary<Array<Function>>;
   name: ?string;
   parent: ?RouteRecord;
   redirect: ?RedirectOption;

diff --git a/src/components/view.js b/src/components/view.js
@@ -1,6 +1,6 @@
 import { warn } from '../util/warn'
 import { extend } from '../util/misc'
-import { tryFinalizeTransition } from '../history/base'
+import { tryFinalizeTransition } from '../util/route'
 
 export default {
   name: 'RouterView',
@@ -64,17 +64,16 @@ export default {
         (!val && current === vm)
       ) {
         matched.instances[name] = val
-        // if the route transition has already been confirmed then we weren't
-        // able to call the cb during confirmation as the component was not
-        // registered yet, so we call it here.
-        tryFinalizeTransition(matched, name)
       }
     }
 
     // also register instance in prepatch hook
     // in case the same component instance is reused across different routes
     ;(data.hook || (data.hook = {})).prepatch = (_, vnode) => {
       matched.instances[name] = vnode.componentInstance
+      // if the route transition has already been confirmed then we weren't
+      // able to call the cb during confirmation as the component was not
+      // registered yet, so we call it here.
       tryFinalizeTransition(matched, name)
     }
 

diff --git a/src/history/base.js b/src/history/base.js
@@ -5,7 +5,7 @@ import type Router from '../index'
 import { inBrowser } from '../util/dom'
 import { runQueue } from '../util/async'
 import { warn, isError, isExtendedError } from '../util/warn'
-import { START, isSameRoute } from '../util/route'
+import { START, isSameRoute, tryFinalizeTransition } from '../util/route'
 import {
   flatten,
8000
   flatMapComponents,
@@ -317,7 +317,10 @@ function bindEnterGuard (
   return function routeEnterGuard (to, from, next) {
     return guard(to, from, cb => {
       if (typeof cb === 'function') {
-        match.pendingCbs[key] = cb
+        if (!match.pendingCbs[key]) {
+          match.pendingCbs[key] = []
+        }
+        match.pendingCbs[key].push(cb)
         cbs.push(() => {
           // if the instance is registered call the cb here, otherwise it will
           // get called when it is registered in the component's lifecycle hooks
@@ -328,12 +331,3 @@ function bindEnterGuard (
     })
   }
 }
-
-export function tryFinalizeTransition (record: RouteRecord, name: string) {
-  if (record.instances[name] && record.pendingCbs[name]) {
-    const instance = record.instances[name]
-    const cb = record.pendingCbs[name]
-    delete record.pendingCbs[name]
-    cb(instance)
-  }
-}
diff --git a/src/util/route.js b/src/util/route.js
@@ -130,3 +130,14 @@ function queryIncludes (current: Dictionary<string>, target: Dictionary<string>)
   }
   return true
 }
+
+export function tryFinalizeTransition (record: RouteRecord, name: string) {
+  if (record.instances[name] && record.pendingCbs[name]) {
+    const instance = record.instances[name]
+    const cbs = record.pendingCbs[name]
+    delete record.pendingCbs[name]
+    for (let i = 0; i < cbs.length; i++) {
+      cbs[i](instance)
+    }
+  }
+}