support keep-alive

Author: yyx990803

example/advanced/app.vue

@@ -22,7 +22,7 @@
     <a v-link="{ path: '/about' }">about</a>
     <a v-link="{ path: '/user/1234/profile/what' }">user</a>
     <a v-link="{ path: '/forbidden' }">forbidden</a>
-    <router-view class="view" transition="test" transition-mode="out-in"></router-view>
+    <router-view class="view" transition="test" transition-mode="out-in" keep-alive></router-view>
   </div>
 </template>
 

src/directives/view.js

@@ -33,13 +33,6 @@ export default function (Vue) {
       // finally, init by delegating to v-component
       componentDef.bind.call(this)
 
-      // does not support keep-alive.
-      /* istanbul ignore if */
-      if (this.keepAlive) {
-        this.keepAlive = false
-        warn('<router-view> does not support keep-alive.')
-      }
-
       // all we need to do here is registering this view
       // in the router. actual component switching will be
       // managed by the pipeline.

src/pipeline.js

@@ -101,7 +101,7 @@ export function deactivate (view, transition, next) {
  * @param {Function} [cb]
  */
 
-export function activate (view, transition, depth, cb) {
+export function activate (view, transition, depth, cb, reuse) {
   let handler = transition.activateQueue[depth]
   if (!handler) {
     // fix 1.0.0-alpha.3 compat
@@ -120,17 +120,61 @@ export function activate (view, transition, depth, cb) {
   view.depth = depth
   view.activated = false
 
-  // unbuild current component. this step also destroys
-  // and removes all nested child views.
-  view.unbuild(true)
-  // build the new component. this will also create the
-  // direct child view of the current one. it will register
-  // itself as view.childView.
-  let component = view.build({
-    _meta: {
-      $loadingRouteData: !!(dataHook && !waitForData)
+  let component
+  let loading = !!(dataHook && !waitForData)
+
+  // "reuse" is a flag passed down when the parent view is
+  // either reused via keep-alive or as a child of a kept-alive view.
+  // of course we can only reuse if the current kept-alive instance
+  // is of the correct type.
+  reuse = reuse && view.childVM && view.childVM.constructor === Component
+
+  if (reuse) {
+    // just reuse
+    component = view.childVM
+    component.$loadingRouteData = loading
+  } else {
+    // unbuild current component. this step also destroys
+    // and removes all nested child views.
+    view.unbuild(true)
+    // handle keep-alive.
+    // if the view has keep-alive, the child vm is not actually
+    // destroyed - its nested views will still be in router's
+    // view list. We need to removed these child views and
+    // cache them on the child vm.
+    if (view.keepAlive) {
+      let views = transition.router._views
+      let i = views.indexOf(view)
+      if (i > 0) {
+        transition.router._views = views.slice(i)
+        if (view.childVM) {
+          view.childVM._routerViews = views.slice(0, i)
+        }
+      }
     }
-  })
+
+    // build the new component. this will also create the
+    // direct child view of the current one. it will register
+    // itself as view.childView.
+    component = view.build({
+      _meta: {
+        $loadingRouteData: loading
+      }
+    })
+    // handle keep-alive.
+    // when a kept-alive child vm is restored, we need to
+    // add its cached child views into the router's view list,
+    // and also properly update current view's child view.
+    if (view.keepAlive) {
+      component.$loadingRouteData = loading
+      let cachedViews = component._routerViews
+      if (cachedViews) {
+        transition.router._views = cachedViews.concat(transition.router._views)
+        view.childView = cachedViews[cachedViews.length - 1]
+        component._routerViews = null
+      }
+    }
+  }
 
   // cleanup the component in case the transition is aborted
   // before the component is ever inserted.
@@ -162,7 +206,7 @@ export function activate (view, transition, depth, cb) {
     view.activated = true
     // activate the child view
     if (view.childView) {
-      activate(view.childView, transition, depth + 1)
+      activate(view.childView, transition, depth + 1, null, reuse || view.keepAlive)
     }
     if (dataHook && waitForData) {
       // wait until data loaded to insert
@@ -172,7 +216,11 @@ export function activate (view, transition, depth, cb) {
       if (dataHook) {
         loadData(component, transition, dataHook)
       }
-      insert()
+      if (!reuse) {
+        insert()
+      } else {
+        cb && cb()
+      }
     }
   }