fix(router-view): add condition to see whether the tree is inactive (fix

#2552) (#2592) Fix #2552
vuejs · Apr 15, 2019 · e6d8fd2 · e6d8fd2
1 parent 6974a6f
commit e6d8fd2
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 5 deletions.
diff --git a/examples/index.html b/examples/index.html
@@ -25,6 +25,7 @@ <h1>Vue Router Examples</h1>
     <li><a href="auth-flow">Auth Flow</a></li>
     <li><a href="discrete-components">Discrete Components</a></li>
     <li><a href="nested-router">Nested Routers</a></li>
+    <li><a href="keepalive-view">Keepalive View</a></li>
   </ul>
 </body>
 </html>
diff --git a/examples/keepalive-view/app.js b/examples/keepalive-view/app.js
@@ -0,0 +1,59 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+Vue.use(VueRouter)
+
+const Wrap = { template: '<div>child: <router-view></router-view></div>' }
+
+const Index = {
+  template: '<wrap />',
+  components: {
+    Wrap
+  }
+}
+
+const IndexChild1 = { template: '<div class="current">index child1</div>' }
+const IndexChild2 = { template: '<div class="current">index child2</div>' }
+
+const Home = { template: '<div class="current">home</div>' }
+
+const router = new VueRouter({
+  mode: 'history',
+  base: __dirname,
+  routes: [
+    {
+      path: '/index',
+      component: Index,
+      children: [
+        {
+          path: 'child1',
+          component: IndexChild1
+        },
+        {
+          path: 'child2',
+          component: IndexChild2
+        }
+      ]
+    },
+    {
+      path: '/home',
+      component: Home
+    }
+  ]
+})
+
+new Vue({
+  router,
+  template: `
+    <div id="app">
+      <ul>
+        <li><router-link tag="a" to="/index/child1">index child 1</router-link></li>
+        <li><router-link tag="a" to="/index/child2">index child 2</router-link></li>
+        <li><router-link tag="a" to="/home">home</router-link></li>
+      </ul>
+      <keep-alive>
+        <router-view></router-view>
+      </keep-alive>
+    </div>
+  `
+}).$mount('#app')
diff --git a/examples/keepalive-view/index.html b/examples/keepalive-view/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="/global.css">
+<style>
+a.router-link-active, li.router-link-active a {
+  color: #f66;
+}
+a.router-link-exact-active, li.router-link-exact-active a {
+  border-bottom: 1px solid #f66;
+}
+</style>
+<a href="/">&larr; Examples index</a>
+<div id="app"></div>
+<script src="/__build__/shared.chunk.js"></script>
+<script src="/__build__/keepalive-view.js"></script>
diff --git a/src/components/view.js b/src/components/view.js
@@ -26,11 +26,14 @@ export default {
     let depth = 0
     let inactive = false
     while (parent && parent._routerRoot !== parent) {
-      if (parent.$vnode && parent.$vnode.data.routerView) {
-        depth++
-      }
-      if (parent._inactive) {
-        inactive = true
+      const vnodeData = parent.$vnode && parent.$vnode.data
+      if (vnodeData) {
+        if (vnodeData.routerView) {
+          depth++
+        }
+        if (vnodeData.keepAlive && parent._inactive) {
+          inactive = true
+        }
       }
       parent = parent.$parent
     }

diff --git a/test/e2e/specs/keepalive-view.js b/test/e2e/specs/keepalive-view.js
@@ -0,0 +1,22 @@
+module.exports = {
+  'keepalive view': function (browser) {
+    browser
+      .url('http://localhost:8080/keepalive-view/')
+      .waitForElementVisible('#app', 1000)
+      .assert.count('li a', 3)
+
+      .click('li:nth-child(1) a')
+      .assert.containsText('.current', 'index child1')
+
+      .click('li:nth-child(2) a')
+      .assert.containsText('.current', 'index child2')
+
+      .click('li:nth-child(3) a')
+      .assert.containsText('.current', 'home')
+
+      // back to index child1 and check it
+      .click('li:nth-child(1) a')
+      .assert.containsText('.current', 'index child1')
+      .end()
+  }
+}