routerView + transition +keepAlive Page component switching exception
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
- modify any content in the script tag of the
home.vue
component - Click on the
about
link in the page - 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