chore(test): added coverage for out-in transition before route enter cb

vuejs · posva · Oct 6, 2020 · Aug 7, 2019 · Aug 8, 2019 · Aug 8, 2019
commit f340981a4c943639dc30be0cd10e530801b8eebf
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/>
+    </transition>
+  </div>`,
   data: () => ({ logs: [] }),
   beforeRouteEnter (to, from, next) {
     next(vm => {
@@ -116,7 +126,18 @@ const GuardMixin = {
   }
 }
 
-const NestedChild = {
+const NestedChild1 = {
+  props: ['n'],
+  template: `<div>Child {{ n }}</div>`,
+  mixins: [GuardMixin],
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      vm.$parent.logs.push('child ' + vm.n)
+    })
+  }
+}
+
+const NestedChild2 = {
   props: ['n'],
   template: `<div>Child {{ n }}</div>`,
   mixins: [GuardMixin],
@@ -162,10 +183,10 @@ const router = new VueRouter({
       path: '/parent',
       component: NestedParent,
       children: [
-        { path: 'child/1', component: NestedChild, props: { n: 1 }},
-        { path: 'child/2', component: NestedChild, props: { n: 2 }}
+        { path: 'child/1', component: NestedChild1, props: { n: 1 }},
+        { path: 'child/2', component: NestedChild2, props: { n: 2 }}
       ]
-    }
+    },
   ]
 })
 

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;
+}

4EAB
+.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>