Vue-router: activated hook behavior if reuse same Component

[shjyh]

Vue.js / vue-router versions

2.2.1 / 2.3.0

i have a simple reuseable Vue Component

// RouterView.component.js
export default { 
    render(c){ return c('keep-alive',[c('router-view')]) }
}

and i config router like this

[
    {
        path:'/a',component:RouterViewComponent,
        children:[
            {path:'b',Component:ABComponent}
        ]
    },
    { path:'/c',component:CComponent },
    {
        path:'/d',component:RouterViewComponent,
        children:[
            {path:'e',Component:DEComponent}
        ]
    }
]

step1
navigate from /a/b to /c, everything ok
step2
then navigate from /c to /d/e, somethen strange happen, ABComponent execute the activated hook.

new feature in latest version Vue : activated and deactivated now fires for all components inside an activated/deactivated tree.

when switch to DEComponent, RouterViewComponent become active, and trigger activated hook, all child components will execute activated hook, but ABComponent is the child component of RouterViewComponent (previous).

---

Updates:

• activated hook on DEPage is not called.
  Repro: https://jsfiddle.net/934yu15p/4/

• /post/109 -> /post/create does not tigger created, mounted etc.
  but / -> /post/109 works as expected.
  vue: 2.2.1
  vue-router: 2.3.0
  Repro: https://jsfiddle.net/934yu15p/6/ (created by @anishdcruz)

[posva]

Please follow the Issue Reporting Guidelines and provide a minimal JSFiddle or Github repository containing a set of reproducible steps that can lead to the behaviour you described. Make sure to boil down the problem as much as possible. Thanks!

[shjyh]

https://jsfiddle.net/934yu15p/3/

[posva]

Thanks! So the inner view gets activated and deactivated right away. To me it looks like an expected behaviour: the outer keep-alive activating the wrapping component, all children get activated too before the router-view component can change the view. It's also what happens with regular components: http://jsfiddle.net/kg24zq3r/1/

[znck]

When visiting /d/e from CPage, activated hook on ABPage is called. IMO that is weird.

@posva You sure? This is expected.

[znck]

Check this one: https://jsfiddle.net/934yu15p/4/. activated hook on DEPage is not called.

[shjyh]

https://jsfiddle.net/o6r54re8/1/
and this one. /a/b -> /d -> /a/c activated hook on ABPage is called.

[anishdcruz]

@znck Similar issue here.

/post/109 -> /post/create does not tigger created, mounted etc.

but / -> /post/109 works as expected.

vue: 2.2.1
vue-router: 2.3.0

[znck]

@anishdcruz Please create a repro.

[anishdcruz]

@znck here is the repo https://jsfiddle.net/934yu15p/6/

[yyx990803]

Fixed in Vue core: https://github.com/vuejs/vue/commit/1073035164b809872bf35a3b007848979f86f48a

@anishdcruz your issue is not really the same one - using the props feature fixes your issue and is much simpler: https://jsfiddle.net/yyx990803/934yu15p/8/