keep-alive缓存。多个路由使用同一个组件 缓存存在问题

[wowoName]

这是我的代码 <router-view v-slot="{ Component, route }"> <transition name="fade-transform" mode="out-in" @after-enter="resizeScroll" @after-leave="resizeScroll"> <keep-alive> <component :is="Component" :key="route.fullPath" /> </keep-alive> </transition> </router-view>
控制台提示错误runtime-dom.esm-bundler.js:51 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'parentNode')
对于多个路由对应同一个组件通过query进行控制时 如何进行有效的缓存

[l246804]

可以试试我的组件 vue-router-better-view 👀 通过 cacheBy 精准控制缓存的组件

[wowoName]

@l246804 好使 感谢

[beishuangzz]

keep-alive是根据组件name进行缓存的, 如果是同一个组件需要缓存多份, 建议把组件动态封装一层, 设置不同的name

[l246804]

keep-alive是根据组件name进行缓存的, 如果是同一个组件需要缓存多份, 建议把组件动态封装一层, 设置不同的name

我的组件原理就是这样做的

[aniruddhaadak80]

@wowoName

Working with Vue reactivity system and compilers can sometimes present interesting edge cases. A few quick things to consider regarding this topic:

1. Reactivity & Refs: Remember that reactive() unwraps refs automatically, but accessing private properties of proxy classes inherently breaks proxy traps. Always interact with the standard exposed endpoints.
2. Component Lifecycle & state: If you are mixing <script setup>, ensure you aren???t trying to mutate props directly or losing reactivity when destructuring (use toRefs if needed).

I highly recommend checking out the Vue DevTools extension to inspect the component tree and verify if the state is updating as expected. Let me know if you want to dig deeper into the specific component logic.

Hope this points you in the right direction! Let me know how it goes. Happy coding!