From 7f55411cf86aec70cf5ed496271f0ea4353a0131 Mon Sep 17 00:00:00 2001
From: zrh122 <1229550935@qq.com>
Date: Sat, 30 Mar 2019 13:57:38 +0800
Subject: [PATCH 1/2] fix(router-view): register instance in init hook

close #2561
---
 src/components/view.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/components/view.js b/src/components/view.js
index f6183a0f4..25bdd0057 100644
--- a/src/components/view.js
+++ b/src/components/view.js
@@ -69,6 +69,17 @@ export default {
       matched.instances[name] = vnode.componentInstance
     }
 
+    // register instance in init hook
+    // in case kept-alive component be actived when routes changed
+    data.hook.init = (vnode) => {
+      if (vnode.data.keepAlive &&
+        vnode.componentInstance &&
+        vnode.componentInstance !== matched.instances[name]
+      ) {
+        matched.instances[name] = vnode.componentInstance
+      }
+    }
+
     // resolve props
     let propsToPass = data.props = resolveProps(route, matched.props && matched.props[name])
     if (propsToPass) {

From 4a3a51a8d8d6688c1316249fa9ccdaf37cbfe7f9 Mon Sep 17 00:00:00 2001
From: zrh122 <1229550935@qq.com>
Date: Sun, 31 Mar 2019 05:26:05 +0800
Subject: [PATCH 2/2] test: add e2e test for #2561

---
 examples/index.html                           |  1 +
 examples/navigation-guard-callback/app.js     | 74 +++++++++++++++++++
 examples/navigation-guard-callback/index.html | 10 +++
 test/e2e/specs/navigation-guard-callback.js   | 48 ++++++++++++
 4 files changed, 133 insertions(+)
 create mode 100644 examples/navigation-guard-callback/app.js
 create mode 100644 examples/navigation-guard-callback/index.html
 create mode 100644 test/e2e/specs/navigation-guard-callback.js

diff --git a/examples/index.html b/examples/index.html
index f2bdf7225..2e2233bd6 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="navigation-guard-callback">Navigation Guard Callback</a></li>
   </ul>
 </body>
 </html>
diff --git a/examples/navigation-guard-callback/app.js b/examples/navigation-guard-callback/app.js
new file mode 100644
index 000000000..40a6e7109
--- /dev/null
+++ b/examples/navigation-guard-callback/app.js
@@ -0,0 +1,74 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+Vue.use(VueRouter)
+
+const Foo = {
+  template: '<div class="current">foo</div>',
+  beforeRouteEnter (to, from, next) {
+    // in-component beforeRouteEnter hook
+    next(vm => {
+      // print log
+      app.logText = 'beforeRouteEnter callback emited'
+    })
+  }
+}
+
+const Bar = { template: '<div class="current">bar</div>' }
+
+const router = new VueRouter({
+  mode: 'history',
+  base: __dirname,
+  routes: [
+    // foo1
+    { path: '/foo1', component: Foo },
+
+    // foo2, same component as foo1
+    { path: '/foo2', component: Foo },
+
+    // bar
+    { path: '/bar', component: Bar }
+  ]
+})
+
+const app = new Vue({
+  data: {
+    applyKeepAlive: false,
+    logText: ''
+  },
+  router,
+  template: `
+    <div id="app">
+      <h1>Navigation Guard Callback</h1>
+      <ul>
+        <li><router-link to="/" id="root">/</router-link></li>
+        <li><router-link to="/foo1" id="foo1">/foo1</router-link></li>
+        <li><router-link to="/foo2" id="foo2">/foo2</router-link></li>
+        <li><router-link to="/bar" id="bar">/bar</router-link></li>
+      </ul>
+      <div v-if="applyKeepAlive" class="keep-alive-wrap">
+        <keep-alive>
+          <router-view class="view"></router-view>
+        </keep-alive>
+      </div>
+      <div v-else>
+        <router-view class="view"></router-view>
+      </div>
+      <div class="log">{{logText}}</div>
+      <div>
+        <button class="btn-apply-keep-alive" @click="toggle">apply keep-alive</button>
+        <button class="btn-clear-log" @click="clear">clear log</button>
+      </div>
+    </div>
+  `,
+  methods: {
+    toggle () {
+      // wrap router-view with keep-alive
+      this.applyKeepAlive = true
+    },
+    clear () {
+      // clear log
+      this.logText = ''
+    }
+  }
+}).$mount('#app')
diff --git a/examples/navigation-guard-callback/index.html b/examples/navigation-guard-callback/index.html
new file mode 100644
index 000000000..11d0edd4b
--- /dev/null
+++ b/examples/navigation-guard-callback/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="/global.css">
+<style>
+.log { border: 1px solid #333; margin: 20px 0; min-height: 100px; }
+a.router-link-exact-active{ color: #f66; }
+</style>
+<a href="/">&larr; Examples index</a>
+<div id="app"></div>
+<script src="/__build__/shared.chunk.js"></script>
+<script src="/__build__/navigation-guard-callback.js"></script>
diff --git a/test/e2e/specs/navigation-guard-callback.js b/test/e2e/specs/navigation-guard-callback.js
new file mode 100644
index 000000000..b6c3aa376
--- /dev/null
+++ b/test/e2e/specs/navigation-guard-callback.js
@@ -0,0 +1,48 @@
+module.exports = {
+  'navigation guard callback': function (browser) {
+    browser
+      .url('http://localhost:8080/navigation-guard-callback/')
+      .waitForElementVisible('#app', 1000)
+      .assert.count('li a', 4)
+
+      .click('.btn-clear-log')
+      .assert.containsText('.log', '')
+      .click('#foo1')
+      .assert.containsText('.current', 'foo')
+      .assert.containsText('.log', 'beforeRouteEnter callback emited')
+
+      .click('#bar')
+      .assert.containsText('.current', 'bar')
+
+      .click('.btn-clear-log')
+      .assert.containsText('.log', '')
+      .click('#foo2')
+      .assert.containsText('.current', 'foo')
+      .assert.containsText('.log', 'beforeRouteEnter callback emited')
+
+      // back to root path
+      .click('#root')
+      .assert.urlEquals('http://localhost:8080/navigation-guard-callback/')
+
+      // apply keep-alive
+      .click('.btn-apply-keep-alive')
+      .assert.elementPresent('.keep-alive-wrap')
+
+      // do the same
+      .click('.btn-clear-log')
+      .assert.containsText('.log', '')
+      .click('#foo1')
+      .assert.containsText('.current', 'foo')
+      .assert.containsText('.log', 'beforeRouteEnter callback emited')
+
+      .click('#bar')
+      .assert.containsText('.current', 'bar')
+
+      .click('.btn-clear-log')
+      .assert.containsText('.log', '')
+      .click('#foo2')
+      .assert.containsText('.current', 'foo')
+      .assert.containsText('.log', 'beforeRouteEnter callback emited')
+      .end()
+  }
+}