search

vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
https://vuejs.org/
MIT License
47.64k stars 8.33k forks source link

Sub RouterView component will render multiple times when using with KeepAlive #4708

Closed ustbhuangyi closed 3 years ago

ustbhuangyi commented 3 years ago

Version

3.2.19

Reproduction link

github.com

Steps to reproduce

  1. Visit Home Page.
  2. Jump to the About Page.
  3. Click button to render Sub Page.

What is expected?

Sub Page component render only once. The create hook called once.

What is actually happening?

Sub Page component render twice, and the created hook called twice.

I have did some research about this issue, hope it helps.

Since the Home Page is keep-alived，so when jump to the About Page, the Home Page won't be unmounted, and the render effect of the Home Page's sub RouterView won't be cleared.

And then when we click this button, the currentRoute of our router changed, which will trigger all the RouterView to be re rendered. Under normal conditions, the RouterView component inside About component will be render as the Sub component. But unfortunately, the RouterView component inside Home component also be re rendered as the Sub component.

posva commented 3 years ago

Duplicate of https://github.com/vuejs/vue-router-next/issues/626