Vue-router: keep-alive inside a transition out-in reuses the old child route

[sqchenxiyuan]

Vue.js / vue-router versions

Vue.js 2.2.2
vue-router 2.3.0

Reproduction Link

https://jsfiddle.net/2tdjec9q/

Steps to reproduce

step1: click to /b you will see this is B
step2: click to /c you will see this is C
step3: click to / you will see this is B not this is A

What is Expected?

at step3 i need this is A not this is B

What is actually happening?

at step3 i need this is A

if not use mode="out-in" this will run success

[posva]

It looks like Vue is reusing the node but not replacing the content as it should. In your case you should key the router-view, otherwise, you won't get a transition between routes / and /b
https://jsfiddle.net/posva/jm2874L9/

IMO, when using a keep-alive combined with transitions, the router-view should always be keyed

[anishdcruz]

@posva I spend few hours trying to fix this. Thanks a lot! Don't you think this should be documented?

[gggllm]

this works indeed

[sqchenxiyuan]

@posva thank you ,,, but this way will build 2 layout

https://jsfiddle.net/u05ubyr5/

layout at / and /b have different data， build 2 layout item

---

I try to find origin of this issues, this is what i find:

when the keep-alive change the component

if have cache will just render this vnode

if (this.cache[key]) {
        vnode.componentInstance = this.cache[key].componentInstance;
      } else {

and if mode is out-in while not trigger view update, so the child router-view will not try to update

if there add a $forceUpdate like this:

if (this.cache[key]) {
        vnode.componentInstance = this.cache[key].componentInstance;
        vnode.componentInstance.$forceUpdate();
      } else {

it will work ~

but I know that this will lead to waste of resources, so can resolve by add

activated(){
this.$forceUpdate();
}

https://jsfiddle.net/g3snybbv/5/

[jxiaox]

@sqchenxiyuan You save my time!