vuejs · posva · Oct 6, 2020 · Aug 7, 2019 · Aug 8, 2019 · Aug 8, 2019
diff --git a/examples/navigation-guards/app.js b/examples/navigation-guards/app.js
@@ -91,15 +91,25 @@ 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>`,
+  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>
+    <!-- #705 -->
+    <!-- Some transitions, specifically out-in transitions, cause the view -->
+    <!-- that is transitioning in to appear significantly later than normal, -->
+    <!-- which can cause bugs as "vm" below in "next(vm => ...)" may not be -->
+    <!-- available at the time the callback is called -->
+    <transition name="fade" mode="out-in">
+      <router-view :key="$route.path"/>
+    </transition>
+  </div>`,
   data: () => ({ logs: [] }),
   beforeRouteEnter (to, from, next) {
     next(vm => {

diff --git a/examples/navigation-guards/index.html b/examples/navigation-guards/index.html
@@ -1,5 +1,13 @@
 <!DOCTYPE html>
 <link rel="stylesheet" href="/global.css">
+<style>
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .5s ease;
+}
+.fade-enter, .fade-leave-active {
+  opacity: 0;
+}
+</style>
 <a href="/">&larr; Examples index</a>
 <div id="app"></div>
 <script src="/__build__/shared.chunk.js"></script>

diff --git a/flow/declarations.js b/flow/declarations.js
@@ -68,6 +68,7 @@ declare type RouteRecord = {
   regex: RouteRegExp;
   components: Dictionary<any>;
   instances: Dictionary<any>;
+  enteredCbs: Dictionary<Array<Function>>;
   name: ?string;
   parent: ?RouteRecord;
   redirect: ?RedirectOption;

diff --git a/src/components/view.js b/src/components/view.js
@@ -1,5 +1,6 @@
 import { warn } from '../util/warn'
 import { extend } from '../util/misc'
+import { handleRouteEntered } from '../util/route'
 
 export default {
   name: 'RouterView',
@@ -94,6 +95,11 @@ export default {
       ) {
         matched.instances[name] = vnode.componentInstance
       }
+
+      // if the route transition has already been confirmed then we weren't
+      // able to call the cbs during confirmation as the component was not
+      // registered yet, so we call it here.
+      handleRouteEntered(route)
     }
 
     const configProps = matched.props && matched.props[name]

diff --git a/src/create-route-map.js b/src/create-route-map.js
@@ -85,6 +85,7 @@ function addRouteRecord (
     regex: compileRouteRegex(normalizedPath, pathToRegexpOptions),
     components: route.components || { default: route.component },
     instances: {},
+    enteredCbs: {},
     name,
     parent,
     matchAs,

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 } from '../util/warn'
-import { START, isSameRoute } from '../util/route'
+import { START, isSameRoute, handleRouteEntered } from '../util/route'
 import {
   flatten,
   flatMapComponents,
@@ -220,11 +220,9 @@ export class History {
     }
 
     runQueue(queue, iterator, () => {
-      const postEnterCbs = []
-      const isValid = () => this.current === route
       // wait until async components are resolved before
       // extracting in-component enter guards
-      const enterGuards = extractEnterGuards(activated, postEnterCbs, isValid)
+      const enterGuards = extractEnterGuards(activated)
       const queue = enterGuards.concat(this.router.resolveHooks)
       runQueue(queue, iterator, () => {
         if (this.pending !== route) {
@@ -234,9 +232,7 @@ export class History {
         onComplete(route)
         if (this.router.app) {
           this.router.app.$nextTick(() => {
-            postEnterCbs.forEach(cb => {
-              cb()
-            })
+            handleRouteEntered(route)
           })
         }
       })
@@ -347,57 +343,31 @@ function bindGuard (guard: NavigationGuard, instance: ?_Vue): ?NavigationGuard {
 }
 
 function extractEnterGuards (
-  activated: Array<RouteRecord>,
-  cbs: Array<Function>,
-  isValid: () => boolean
+  activated: Array<RouteRecord>
 ): Array<?Function> {
   return extractGuards(
     activated,
     'beforeRouteEnter',
     (guard, _, match, key) => {
-      return bindEnterGuard(guard, match, key, cbs, isValid)
+      return bindEnterGuard(guard, match, key)
     }
   )
 }
 
 function bindEnterGuard (
   guard: NavigationGuard,
   match: RouteRecord,
-  key: string,
-  cbs: Array<Function>,
-  isValid: () => boolean
+  key: string
 ): NavigationGuard {
   return function routeEnterGuard (to, from, next) {
     return guard(to, from, cb => {
       if (typeof cb === 'function') {
-        cbs.push(() => {
-          // #750
-          // if a router-view is wrapped with an out-in transition,
-          // the instance may not have been registered at this time.
-          // we will need to poll for registration until current route
-          // is no longer valid.
-          poll(cb, match.instances, key, isValid)
-        })
+        if (!match.enteredCbs[key]) {
+          match.enteredCbs[key] = []
+        }
+        match.enteredCbs[key].push(cb)
       }
       next(cb)
     })
   }
 }
-
-function poll (
-  cb: any, // somehow flow cannot infer this is a function
-  instances: Object,
-  key: string,
-  isValid: () => boolean
-) {
-  if (
-    instances[key] &&
-    !instances[key]._isBeingDestroyed // do not reuse being destroyed instance
-  ) {
-    cb(instances[key])
-  } else if (isValid()) {
-    setTimeout(() => {
-      poll(cb, instances, key, isValid)
-    }, 16)
-  }
-}
diff --git a/src/util/route.js b/src/util/route.js
@@ -130,3 +130,18 @@ function queryIncludes (current: Dictionary<string>, target: Dictionary<string>)
   }
   return true
 }
+
+export function handleRouteEntered (route: Route) {
+  for (let i = 0; i < route.matched.length; i++) {
+    const record = route.matched[i]
+    for (const name in record.instances) {
+      const instance = record.instances[name]
+      const cbs = record.enteredCbs[name]
+      if (!instance || !cbs) continue
+      delete record.enteredCbs[name]
+      for (let i = 0; i < cbs.length; i++) {
+        if (!instance._isBeingDestroyed) cbs[i](instance)
+      }
+    }
+  }
+}