Skip to content

nested router-view renders incorrect component with wrapping keep-alive at root #2552

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Jump to bottom
Closed
zrh122 opened this issue Dec 25, 2018 · 2 comments · Fixed by #2592, mariazevedo88/hash-generator-js#5, tghelere/valorize-vidas#4, tghelere/DeliVuery#18 or tghelere/dailymages#2
Closed

nested router-view renders incorrect component with wrapping keep-alive at root #2552

zrh122 opened this issue Dec 25, 2018 · 2 comments · Fixed by #2592, mariazevedo88/hash-generator-js#5, tghelere/valorize-vidas#4, tghelere/DeliVuery#18 or tghelere/dailymages#2
Labels
bug has PR keep-alive Problem appearing when using keep-alive

Comments

@zrh122
Copy link
Contributor

zrh122 commented Dec 25, 2018

Version

3.0.2

Reproduction link

https://jsfiddle.net/zrh122/vmopsbeh/

Steps to reproduce

  • click index child1
  • click index child2
  • click home
  • click index child1

What is expected?

index child1 component

What is actually happening?

index child2 component
@posva posva added the bug label Dec 25, 2018
@posva
Copy link
Member

posva commented Dec 25, 2018 •
edited
Loading

Seems to be related to the Wrapper component containing the router-view instead of index.
Adding :key="$route.path" to the root router-view

note to myself: doesn't seem to happen in vanilla Vue: https://jsfiddle.net/u7b4srja/

@posva posva changed the title router-view render incorrect component when kept-alive nested router-view renders incorrect component with wrapping keep-alive at root Dec 25, 2018
@zrh122
Copy link
Contributor Author

zrh122 commented Dec 25, 2018

in the forth step, router-view in the Wrapper component renders cached component index child2.
i am thinking this code https://github.com/vuejs/vue-router/blob/v3.0.2/src/components/view.js#L40 caused this problem, the component tree is activated that means inactive should be false but it is true when i debug.

@posva posva added the keep-alive Problem appearing when using keep-alive label Dec 28, 2018
zrh122 added a commit to zrh122/vue-router that referenced this issue Jan 22, 2019
@zrh122
fix(router-view): add condition to see whether the tree is inactive
0bcc34e 
close vuejs#2552
@zrh122 zrh122 mentioned this issue Jan 22, 2019
Merged
zrh122 added a commit to zrh122/vue-router that referenced this issue Jan 22, 2019
@zrh122
test: add e2e test for vuejs#2552
10346f3
@posva posva added the has PR label Mar 26, 2019
posva pushed a commit that referenced this issue Apr 15, 2019
@zrh122 @posva
fix(router-view): add condition to see whether the tree is inactive (fix
e6d8fd2 
 #2552) (#2592)

Fix #2552

<!--
Please make sure to read the Pull Request Guidelines:
https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md#pull-request-guidelines
-->
This was referenced Aug 29, 2019
Open
Open
Closed
Open
@posva posva mentioned this issue Sep 9, 2019
Closed
@tt9133github tt9133github mentioned this issue Sep 18, 2019
Open
This was referenced Sep 22, 2019
Merged
Open
Open
@snyk-bot snyk-bot mentioned this issue Oct 1, 2019
Open
This was referenced Oct 26, 2019
Open
Open
This was referenced Jan 20, 2020
Merged
Merged
Merged
Merged
@snyk-bot snyk-bot mentioned this issue Feb 5, 2020
Merged
This was referenced Feb 6, 2020
Open
Merged
@tt9133github tt9133github mentioned this issue Feb 14, 2020
Open
@snyk-bot snyk-bot mentioned this issue Feb 25, 2020
Closed
This was referenced Mar 4, 2020
Open
Open
This was referenced Mar 24, 2020
Merged
Closed
@snyk-bot snyk-bot mentioned this issue Apr 3, 2020
Merged
@snyk-bot snyk-bot mentioned this issue Apr 15, 2020
Open
# for free to join this conversation on GitHub. Already have an account? # to comment
Assignees
No one assigned
Labels
bug has PR keep-alive Problem appearing when using keep-alive
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(router-view): add condition to see whether the tree is inactive (fix #2552) zrh122/vue-router
[Snyk] Upgrade vue-router from 3.0.2 to 3.1.3 mariazevedo88/hash-generator-js
[Snyk] Upgrade vue-router from 3.0.2 to 3.1.3 tghelere/valorize-vidas
[Snyk] Upgrade vue-router from 3.0.1 to 3.1.3 tghelere/DeliVuery
[Snyk] Upgrade vue-router from 3.0.1 to 3.1.3 tghelere/dailymages
[Snyk] Upgrade vue-router from 3.0.1 to 3.1.3 tghelere/vuestore
[Snyk] Upgrade vue-router from 3.0.2 to 3.1.3 estafette/estafette-ci-web
[Snyk] Upgrade vue-router from 3.0.2 to 3.1.4 santosomar/linux_kernel_cves
[Snyk] Upgrade vue-router from 3.0.2 to 3.1.6 OpenTMI/opentmi-default-gui
[Snyk] Upgrade vue-router from 3.0.1 to 3.1.6 LuisAlejandro/luisalejandro.github.io-legacy
2 participants
@posva @zrh122