fix(router-view): register instance in init hook

Fix #2561
Close ##2689

Squashed commit of the following:

commit e18dd2f660b2154b26e6afa9d60ac76b047b8e40
Author: Eduardo San Martin Morote <[email protected]>
Date:   Mon Apr 15 12:54:55 2019 +0200

    refactor: use keepalive example instead

commit 2c458af27f5371c690c2832d59e0b670e43a17fa
Author: Eduardo San Martin Morote <[email protected]>
Date:   Mon Apr 15 11:48:24 2019 +0200

    refactor: remove unused classes

commit 8467722640ee11baecabf52dd91bbc7d90d370a0
Author: zrh122 <[email protected]>
Date:   Sun Mar 31 05:26:05 2019 +0800

    test: add e2e test for #2561

commit af0ff980b4ca0b32637aa34d692587a790790947
Author: zrh122 <[email protected]>
Date:   Sat Mar 30 13:57:38 2019 +0800

    fix(router-view): register instance in init hook

    close #2561

Author: posva

examples/keepalive-view/app.js

@@ -12,10 +12,20 @@ const Index = {
   }
 }
 
-const IndexChild1 = { template: '<div class="current">index child1</div>' }
-const IndexChild2 = { template: '<div class="current">index child2</div>' }
+const WithGuard = {
+  template: '<div>{{ $route.name }}: {{ n }}</div>',
+  data: () => ({ n: 0 }),
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      vm.n++
+    })
+  }
+}
 
-const Home = { template: '<div class="current">home</div>' }
+const IndexChild1 = { template: '<div>index child1</div>' }
+const IndexChild2 = { template: '<div>index child2</div>' }
+
+const Home = { template: '<div>home</div>' }
 
 const router = new VueRouter({
   mode: 'history',
@@ -38,6 +48,16 @@ const router = new VueRouter({
     {
       path: '/home',
       component: Home
+    },
+    {
+      path: '/with-guard1',
+      name: 'with-guard1',
+      component: WithGuard
+    },
+    {
+      path: '/with-guard2',
+      name: 'with-guard2',
+      component: WithGuard
     }
   ]
 })
@@ -47,12 +67,14 @@ new Vue({
   template: `
     <div id="app">
       <ul>
-        <li><router-link to="/index/child1">index child 1</router-link></li>
-        <li><router-link to="/index/child2">index child 2</router-link></li>
-        <li><router-link to="/home">home</router-link></li>
+        <li><router-link to="/index/child1">/index/child1</router-link></li>
+        <li><router-link to="/index/child2">/index/child2</router-link></li>
+        <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>
       </ul>
       <keep-alive>
-        <router-view></router-view>
+        <router-view class="view"></router-view>
       </keep-alive>
     </div>
   `

src/components/view.js

@@ -72,6 +72,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) {

test/e2e/specs/keepalive-view.js

@@ -3,20 +3,30 @@ module.exports = {
     browser
       .url('http://localhost:8080/keepalive-view/')
       .waitForElementVisible('#app', 1000)
-      .assert.count('li a', 3)
+      .assert.count('li a', 5)
 
       .click('li:nth-child(1) a')
-      .assert.containsText('.current', 'index child1')
+      .assert.containsText('.view', 'index child1')
 
       .click('li:nth-child(2) a')
-      .assert.containsText('.current', 'index child2')
+      .assert.containsText('.view', 'index child2')
 
       .click('li:nth-child(3) a')
-      .assert.containsText('.current', 'home')
+      .assert.containsText('.view', 'home')
 
       // back to index child1 and check it
       .click('li:nth-child(1) a')
-      .assert.containsText('.current', 'index child1')
+      .assert.containsText('.view', 'index child1')
+
+      // beforeRouteEnter guard with keep alive
+      // https://github.com/vuejs/vue-router/issues/2561
+      .click('li:nth-child(4) a')
+      .assert.containsText('.view', 'with-guard1: 1')
+      .click('li:nth-child(5) a')
+      .assert.containsText('.view', 'with-guard2: 2')
+      .click('li:nth-child(4) a')
+      .assert.containsText('.view', 'with-guard1: 3')
+
       .end()
   }
 }