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 <[email protected]>
vuejs · Jan 14, 2020 · 0c2b1aa · 0c2b1aa
1 parent d4894b2
commit 0c2b1aa
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 14 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/package.json b/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",

diff --git a/src/components/view.js b/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
  }

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:/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()
  }
 }
diff --git a/yarn.lock b/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"