fix async component

Author: yyx990803

src/pipeline.js

@@ -58,7 +58,7 @@ exports.canDeactivate = function (view, transition, next) {
 exports.canActivate = function (handler, transition, next) {
   util.resolveAsyncComponent(handler, function (Component) {
     // have to check due to async-ness
-    if (transition.to._aborted) {
+    if (transition.aborted) {
       return
     }
     // determine if this component can be activated

src/router/internal.js

@@ -137,7 +137,12 @@ module.exports = function (Vue, Router) {
       return
     }
 
-    // construct route context
+    // abort previous transition
+    if (this._currentTransition) {
+      this._currentTransition.aborted = true
+    }
+
+    // construct new route and transition context
     var route = new Route(path, this)
     var transition = this._currentTransition =
       new RouteTransition(this, route, previousRoute)
@@ -152,6 +157,7 @@ module.exports = function (Vue, Router) {
       })
     }
 
+    // check global before hook
     var before = this._beforeEachHook
     var startTransition = function () {
       transition.start(function () {
@@ -231,7 +237,7 @@ module.exports = function (Vue, Router) {
       comp = handler.component = Vue.extend(comp)
     }
     /* istanbul ignore if */
-    if (typeof comp !== 'function' || !comp.cid) {
+    if (typeof comp !== 'function') {
       handler.component = null
       routerUtil.warn(
         'invalid component for route "' + handler.path + '"'

src/transition.js

@@ -12,11 +12,6 @@ var pipeline = require('./pipeline')
  */
 
 function Transition (router, to, from) {
-  // mark previous route as aborted
-  if (from) {
-    from._aborted = true
-  }
-
   this.router = router
   this.to = to
   this.from = from
@@ -57,7 +52,6 @@ var p = Transition.prototype
 p.abort = function () {
   if (!this.aborted) {
     this.aborted = true
-    this.to._aborted = true
     this.router.replace(this.from.path || '/')
   }
 }
@@ -69,16 +63,10 @@ p.abort = function () {
  */
 
 p.redirect = function (path) {
-  /* istanbul ignore else */
   if (!this.aborted) {
     this.aborted = true
-    this.to._aborted = true
     path = util.mapParams(path, this.to.params, this.to.query)
     this.router.replace(path)
-  } else {
-    util.warn(
-      'Don\'t call redirect() on an already aborted transition.'
-    )
   }
 }
 
@@ -203,7 +191,7 @@ p.callHook = function (hook, context, cb, expectBoolean, cleanup) {
       return
     }
     nextCalled = true
-    if (!cb || transition.to._aborted) {
+    if (!cb || transition.aborted) {
       return
     }
     cb(data)

test/unit/specs/core.js

@@ -534,6 +534,69 @@ describe('Core', function () {
         history.back()
       })
     })
+
+    it('async component', function (done) {
+      router = new Router({
+        abstract: true
+      })
+      router.map({
+        '/a': {
+          component: function (resolve) {
+            setTimeout(function () {
+              resolve({
+                template: 'hello!'
+              })
+            }, wait)
+          }
+        }
+      })
+      router.start(Vue.extend({
+        template: '<div><router-view></router-view></div>'
+      }), el)
+      router.go('/a')
+      expect(router.app.$el.textContent).toBe('')
+      setTimeout(function () {
+        expect(router.app.$el.textContent).toBe('hello!')
+        done()
+      }, wait * 2)
+    })
+
+    it('async component abort', function (done) {
+      var spy = jasmine.createSpy('async-component-abort')
+      router = new Router({
+        abstract: true
+      })
+      router.map({
+        '/a': {
+          component: function (resolve) {
+            setTimeout(function () {
+              resolve({
+                template: 'hello!',
+                created: spy
+              })
+            }, wait)
+          }
+        },
+        '/b': {
+          component: {
+            template: 'B'
+          }
+        }
+      })
+      router.start(Vue.extend({
+        template: '<div><router-view></router-view></div>'
+      }), el)
+      router.go('/a')
+      expect(router.app.$el.textContent).toBe('')
+      setTimeout(function () {
+        router.go('/b')
+        setTimeout(function () {
+          expect(router.app.$el.textContent).toBe('B')
+          expect(spy).not.toHaveBeenCalled()
+          done()
+        }, wait * 2)
+      }, 0)
+    })
   }
 
   function assertRoutes (matches, options, done) {