handle late-rendered <router-view> inside conditional block (fix #109)

Author: yyx990803

src/directives/view.js

@@ -1,4 +1,5 @@
 import { warn } from '../util'
+import { activate } from '../pipeline'
 
 export default function (Vue) {
 
@@ -58,6 +59,19 @@ export default function (Vue) {
         // parent's has resolved.
         parentView.childView = this
       }
+
+      // handle late-rendered view
+      // two possibilities:
+      // 1. root view rendered after transition has been
+      //    validated;
+      // 2. child view rendered after parent view has been
+      //    activated.
+      var transition = route.router._currentTransition
+      if ((!parentView && transition.done) ||
+          (parentView && parentView.activated)) {
+        var depth = parentView ? parentView.depth + 1 : 0
+        activate(this, transition, depth)
+      }
     },
 
     unbind: function () {

src/pipeline.js

@@ -113,6 +113,9 @@ export function activate (view, transition, depth, cb) {
   let dataHook = getRouteConfig(Component, 'data')
   let waitForData = getRouteConfig(Component, 'waitForData')
 
+  view.depth = depth
+  view.activated = false
+
   // unbuild current component. this step also destroys
   // and removes all nested child views.
   view.unbuild(true)
@@ -152,6 +155,7 @@ export function activate (view, transition, depth, cb) {
 
   // called after activation hook is resolved
   let afterActivate = () => {
+    view.activated = true
     // activate the child view
     if (view.childView) {
       exports.activate(view.childView, transition, depth + 1)

src/router/internal.js

@@ -208,6 +208,7 @@ export default function (Vue, Router) {
         from: transition.from
       }))
     }
+    this._currentTransition.done = true
   }
 
   /**

src/transition.js

@@ -22,6 +22,7 @@ export default class RouteTransition {
     this.from = from
     this.next = null
     this.aborted = false
+    this.done = false
 
     // start by determine the queues
 

test/unit/specs/core.js

@@ -681,6 +681,47 @@ describe('Core', function () {
         }, wait * 2)
       }, 0)
     })
+
+    it('late-rendered view inside conditional blocks', function (done) {
+      var component = {
+        template:
+          '<div>' +
+            '<div v-if="show">' +
+              '<router-view></router-view>' +
+            '</div>' +
+          '</div>',
+        data: function () {
+          return { show: false }
+        },
+        compiled: function () {
+          var self = this
+          setTimeout(function () {
+            self.show = true
+          }, wait)
+        }
+      }
+      router = new Router({
+        abstract: true
+      })
+      router.map({
+        '/a': {
+          component: component,
+          subRoutes: {
+            '/b': {
+              component: {
+                template: 'Rendered!'
+              }
+            }
+          }
+        }
+      })
+      router.start(Vue.extend(component), el)
+      router.go('/a/b')
+      setTimeout(function () {
+        expect(router.app.$el.textContent).toBe('Rendered!')
+        done()
+      }, wait * 3)
+    })
   }
 
   function assertRoutes (matches, options, done) {