fix(router-view): fix deeply nested keep-alive router-views displaying

Fix vuejs#2923
zrh122 · Sep 17, 2019 · 6114e6f · 6114e6f
1 parent 41b9ac8
commit 6114e6f
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 9 deletions.
diff --git a/examples/keepalive-view/app.js b/examples/keepalive-view/app.js
@@ -27,6 +27,8 @@ const IndexChild2 = { template: '<div>index child2</div>' }
 
 const Home = { template: '<div>home</div>' }
 
+const ViewWithKeepalive = { template: '<keep-alive><router-view></router-view></keep-alive>' }
+
 const router = new VueRouter({
   mode: 'history',
   base: __dirname,
@@ -58,6 +60,26 @@ const router = new VueRouter({
       path: '/with-guard2',
       name: 'with-guard2',
       component: WithGuard
+    },
+    {
+      path: '/one',
+      component: ViewWithKeepalive,
+      children: [
+        {
+          path: 'two',
+          component: ViewWithKeepalive,
+          children: [
+            {
+              path: 'child1',
+              component: IndexChild1
+            },
+            {
+              path: 'child2',
+              component: IndexChild2
+            }
+          ]
+        }
+      ]
     }
   ]
 })
@@ -72,6 +94,8 @@ new Vue({
         <li><router-link to="/home">/home</router-link></li>
         <li><router-link to="/with-guard1">/with-guard1</router-link></li>
         <li><router-link to="/with-guard2">/with-guard2</router-link></li>
+        <li><router-link to="/one/two/child1">/one/two/child1</router-link></li>
+        <li><router-link to="/one/two/child2">/one/two/child2</router-link></li>
       </ul>
       <keep-alive>
         <router-view class="view"></router-view>

diff --git a/src/components/view.js b/src/components/view.js
@@ -26,14 +26,11 @@ export default {
     let depth = 0
     let inactive = false
     while (parent && parent._routerRoot !== parent) {
-      const vnodeData = parent.$vnode && parent.$vnode.data
-      if (vnodeData) {
-        if (vnodeData.routerView) {
-          depth++
-        }
-        if (vnodeData.keepAlive && parent._inactive) {
-          inactive = true
-        }
+      if (parent.$vnode && parent.$vnode.data.routerView) {
+        depth++
+      }
+      if (parent._directInactive && parent._inactive) {
+        inactive = true
       }
       parent = parent.$parent
     }

diff --git a/test/e2e/specs/keepalive-view.js b/test/e2e/specs/keepalive-view.js
@@ -9,7 +9,7 @@ module.exports = {
     browser
       .url('http://localhost:8080/keepalive-view/')
       .waitForElementVisible('#app', 1000)
-      .assert.count('li a', 5)
+      .assert.count('li a', 7)
 
       .click('li:nth-child(1) a')
       .assert.containsText('.view', 'index child1')
@@ -35,6 +35,15 @@ module.exports = {
       .click('li:nth-child(4) a')
       .assert.containsText('.view', 'with-guard1: 3')
 
+      // keep-alive deeply nested router-views
+      // https://github.com/vuejs/vue-router/issues/2923
+      .click('li:nth-child(6) a')
+      .assert.containsText('.view', 'index child1')
+      .click('li:nth-child(3) a')
+      .assert.containsText('.view', 'home')
+      .click('li:nth-child(7) a')
+      .assert.containsText('.view', 'index child2')
+
       .end()
   }
 }