keep-alive component in nested route result in child route mounted twice

[LiHDong]

Version

3.0.3

Reproduction link

https://codesandbox.io/s/nifty-roentgen-67uyr
without vue router

Steps to reproduce

There is 5 files in the project. These files are App.vue, UserCenter/Index.vue, UserCenter/Push.vue, List/Index.vue, List/Detail.vue. Two Index.vue files are the child routes of App.vue, and I wrote keep-alive in App.vue. Push.vue and Detail.vue are child routes of two Index.vue, and I wrote keep-alive in two Index.vue to cache them.Here is the step to reproduce:

1. First, open the sandbox link and open console, you will find the console print 'app loading';
2. Second, click 'push page' link, console print 'user center loading... ' and 'push loading... ';
3. Third, click 'detail page' link, console print 'list loading...' and 'detail loading...' twice;
4. Forth, navigate back to previous push page, console print 'push loading' again.

What is expected?

In step 3, I just expect it print once; In step4, it's not supposed to print again;

What is actually happening?

In these circumstance, I found the child route mount twice;And about step 4 in my project, I found the cache did function, but it did mount again, which was confusing.

[edison1105]

It seems like a Vue-router bug.

[LiHDong]

It seems like a Vue-router bug.

I'm sorry that I cannot figure out where the problem is. Look forward to an avaible solution.Thanks!

[posva]

@LiHDong moved to vue-router repo for the moment

The problem comes from the nested router-view inside UserCenter: because it's kept alive, it reacts to route changes and tries to render with the new nested view. I will see if there is a way to prevent this.

[posva]

The problem is the same as vuejs/vue#8819 which I don't know if it's expected or not. @yyx990803 is it normal for an inactive kept-alive component to keep rendering while inactive?

In the context of vue-router I tried internally avoiding rendering the router-view when the component is inactive, but it's too late, it still gets to mount the children once, resulting in mounting two Detail pages. So I tried not changing the route for nested router views but it turns out the onDeactivated hook triggers after computed based on the current route location, not allowing me to pass the old version of a route

// getting the global route or a route injected by a parent router-view
const injectedRoute = inject(routerViewLocationKey, inject( routeLocationKey));
onDeactivated(() => {
    console.log('deactivated', depth)
})
const myRoute = computed(() => {
    console.log('computing myRoute')
    return (props.route || unref(injectedRoute))
})
// providing the route to nested router-view
provide(routerViewLocationKey, myRoute)

This prints computing myRoute and then deactivated. If it was the other way around, I could have cached the previous value of myRoute.

So far I don't see a way to handle this apart from manually deactivating any critical watcher with a variable that is toggled inside onDeactivated()

edit: Opened issue on Vue Core looking for guidance
tldr: in this example the page changes after the new component is rendered. That where the router is currently blocked to fix this

[danitatt]

Also ran into the mounted issue in nested routes when using keep-alive, which causes repeated calls to the database :(
Didn't find a solution :(

vue@3.0.5
vue-router@4.0.3

[emiyalee1005]

Same problem here since from the beta version and to the v4.0.5

[edgexie]

my component named SubModuleA.vue, its activated deactivated twice

https://codesandbox.io/s/cool-galois-f055n

[x-255]

I also have a similar problem. Is there any solution.

[XiaoRIGE]

I have also encountered this problem recently. Has this problem been solved？