routerView + transition +keepAlive Page component switching exception

[zguiyang]

Vue version

3.2.45

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-tpdwcn?file=src%2Fviews%2Fhome.vue&terminal=dev

Steps to reproduce

1. modify any content in the script tag of the home.vue component
2. Click on the about link in the page
3. the page component is not loaded properly

If you do not do the above operation, directly click the home and about links in the page to switch pages without any exception

What is expected?

Page components load normally

What is actually happening?

The page does not switch properly

System Info

System:
    OS: macOS 13.2
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 92.27 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 19.5.0 - ~/.nvm/versions/node/v19.5.0/bin/node
    npm: 9.3.1 - ~/.nvm/versions/node/v19.5.0/bin/npm
  Browsers:
    Chrome: 109.0.5414.119
    Safari: 16.3
  npmPackages:
    vue: ^3.2.45 => 3.2.45

Any additional comments?

After testing, I found that it is the problem of wrapping and animation of transition formation in layouts/BasicLayout.vue component, but I don't know the exact cause and how to solve it

[zhangzhonghe]

Duplicate of #7121