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

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

Fix #2923

* chore: upgrade chromedriver

* refactor(view): add keepAlive check

Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com>

Author: zrh122

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>

package.json

@@ -62,7 +62,7 @@
     "babel-preset-flow-vue": "^1.0.0",
     "browserstack-local": "^1.4.0",
     "buble": "^0.19.8",
-    "chromedriver": "^76.0.0",
+    "chromedriver": "^79.0.0",
     "conventional-changelog-cli": "^2.0.11",
     "cross-spawn": "^6.0.5",
     "css-loader": "^2.1.1",

src/components/view.js

@@ -26,14 +26,12 @@ 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
-        }
+      const vnodeData = parent.$vnode ? parent.$vnode.data : {}
+      if (vnodeData.routerView) {
+        depth++
+      }
+      if (vnodeData.keepAlive && parent._directInactive && parent._inactive) {
+        inactive = true
       }
       parent = parent.$parent
     }

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()
   }
 }

yarn.lock

@@ -2701,10 +2701,10 @@ chrome-trace-event@^1.0.2:
   dependencies:
     tslib "^1.9.0"
 
-chromedriver@^76.0.0:
-  version "76.0.0"
-  resolved "https://registry.yarnpkg.com/chromedriver/-/chromedriver-76.0.0.tgz#cbf618c5b370799ff6e15b23de07e80f67f89025"
-  integrity sha512-jGyqs0N+lMo9iaNQxGKNPiLJWb2L9s2rwbRr1jJeQ37n6JQ1+5YMGviv/Fx5Z08vBWYbAvrKEzFsuYf8ppl+lw==
+chromedriver@^79.0.0:
+  version "79.0.0"
+  resolved "https://registry.yarnpkg.com/chromedriver/-/chromedriver-79.0.0.tgz#1660ac29924dfcd847911025593d6b6746aeea35"
+  integrity sha512-DO29C7ntJfzu6q1vuoWwCON8E9x5xzopt7Q41A7Dr7hBKcdNpGw1l9DTt9b+l1qviOWiJLGsD+jHw21ptEHubA==
   dependencies:
     del "^4.1.1"
     extract-zip "^1.6.7"