force reuse when aborting after activation

Author: yyx990803

README.md

@@ -30,9 +30,12 @@ npm run build
 # and unit tests at localhost:8081
 npm run dev
 
-# lint & run unit tests with coverage report
+# lint & run all tests
 npm test
 
-# run e2e tests for example app in Chrome & Firefox
+# run unit tests only
+npm run unit
+
+# run e2e tests only
 npm run e2e-local
 ```

circle.yml

@@ -11,7 +11,7 @@ dependencies:
 test:
   override:
     # Run unit tests
-    - npm test
+    - npm run unit
     # start sauce connect
     - cd sc-*-linux && ./bin/sc -u $SAUCE_USERNAME -k $SAUCE_ACCESS_KEY -f ~/sc_ready:
         background: true

example/components/inbox/message.vue

@@ -27,7 +27,7 @@ module.exports = {
       // callback based
       messagesSerivce.get(params, function (err, message) {
         if (err) {
-          transition.abort(err)
+          // handle error, e.g. display a warning
         } else {
           transition.next({
             message: message

package.json

@@ -6,14 +6,15 @@
   "scripts": {
     "dev": "npm run serve & npm run serve-test",
     "lint": "eslint src build test/e2e test/unit/specs",
-    "test": "npm run lint && ./node_modules/karma/bin/karma start build/karma.config.js",
+    "unit": "./node_modules/karma/bin/karma start build/karma.config.js",
     "build": "webpack --config build/webpack.build.dev.config.js && webpack --config build/webpack.build.min.config.js",
     "serve": "webpack-dev-server --hot --config example/webpack.config.js --content-base example --history-api-fallback --host 0.0.0.0",
     "serve-test": "webpack-dev-server --quiet --config test/unit/webpack.config.js --content-base test/unit --history-api-fallback --host 0.0.0.0 --port 8081",
     "e2e-sauce": "nightwatch -c build/nightwatch.sauce.json -e chrome,firefox,ie10,ie11",
     "e2e-local": "bash ./build/e2e.sh",
     "release": "bash ./build/release.sh",
-    "docs": "bash ./build/update-docs.sh"
+    "docs": "bash ./build/update-docs.sh",
+    "test": "npm run lint && npm run unit && npm run e2e-local"
   },
   "repository": {
     "type": "git",

src/directives/view.js

@@ -38,7 +38,6 @@ module.exports = function (Vue) {
       // in the router. actual component switching will be
       // managed by the pipeline.
       var router = this.router = route._router
-      this.depth = router._views.length
       router._views.unshift(this)
 
       // note the views are in reverse order.

src/pipeline.js

@@ -13,7 +13,9 @@ exports.canReuse = function (view, handler, transition) {
   if (!component || !handler) {
     return false
   }
-  if (component.constructor !== handler.component) {
+  // important: check view.Component here because it may
+  // have been changed in activate hook
+  if (view.Component !== handler.component) {
     return false
   }
   var canReuseFn = util.getRouteConfig(component, 'canReuse')
@@ -92,11 +94,12 @@ exports.deactivate = function (view, transition, next) {
  *
  * @param {Directive} view
  * @param {Transition} transition
+ * @param {Number} depth
  * @param {Function} [cb]
  */
 
-exports.activate = function (view, transition, cb) {
-  var handler = transition.activateQueue[view.depth]
+exports.activate = function (view, transition, depth, cb) {
+  var handler = transition.activateQueue[depth]
   if (!handler) {
     view.setComponent(null)
     cb && cb()
@@ -143,7 +146,7 @@ exports.activate = function (view, transition, cb) {
   var afterActivate = function () {
     // activate the child view
     if (view.childView) {
-      exports.activate(view.childView, transition)
+      exports.activate(view.childView, transition, depth + 1)
     }
     if (dataHook && waitForData) {
       // wait until data loaded to insert

src/transition.js

@@ -136,7 +136,9 @@ p.start = function (cb) {
         // the root of the chain that needs to be replaced
         // is the top-most non-reusable view.
         if (daq.length) {
-          pipeline.activate(daq[daq.length - 1], transition, cb)
+          var view = daq[daq.length - 1]
+          var depth = reuseQueue ? reuseQueue.length : 0
+          pipeline.activate(view, transition, depth, cb)
         } else {
           cb()
         }
@@ -194,8 +196,8 @@ p.callHook = function (hook, context, cb, expectBoolean, cleanup) {
     cb(data)
   }
   var abort = function () {
-    transition.abort()
     cleanup && cleanup()
+    transition.abort()
   }
   // the copied transition object passed to the user.
   var exposed = {