diff --git a/examples/index.html b/examples/index.html
index f2bdf7225..9fcb249da 100644
--- 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
new file mode 100644
index 000000000..e158f5fb8
--- /dev/null
+++ 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
new file mode 100644
index 000000000..2781935a4
--- /dev/null
+++ 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="/">← 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
index f6183a0f4..a3c8a0319 100644
--- 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
new file mode 100644
index 000000000..7e68ada41
--- /dev/null
+++ 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()
+ }
+}