Closed Real047 closed 8 months ago
Bot detected the issue body's language is not English, translate it automatically.
Title: 🐛 [Bug]: does not work when keep-alive, route caching cannot be implemented
感谢您的反馈,请提供一下复现demo,以便更快地排查此问题
Bot detected the issue body's language is not English, translate it automatically.
Thank you for your feedback. Please provide a reproduction demo to troubleshoot this issue faster.
好的,下面提供了页面的源代码和效果,要达到的目的
router-view和keep-alive使用的页面 页面A 页面B
效果 页面A 页面B 目的 我需要实现切换路由时缓存各页面的input保留输入的数据,不重新加载页面,不重新发送请求(不仅是input)
demo 源代码 keep_alive.zip
Bot detected the issue body's language is not English, translate it automatically.
![Uploading screenshot.PNG…]()
经过分析,原因是因为 keep/index.vue 这一层组件在切换路由时, 整体切换了,所以它里面的keep-alive也不会有效果。 证明图:
Bot detected the issue body's language is not English, translate it automatically.
After analysis, the reason is that the keep/index.vue layer component is switched as a whole when switching routes, so the keep-alive inside it will not have any effect**. Proof diagram:
【方案一】不依赖路由, 仅在页面级进行组件切换,验证缓存 将A,B直接引入 index.vue index.vue的模板改为:
<keep-alive>
<component :is="curr.value" />
</keep-alive>
脚本:
import { ref ,reactive ,markRaw} from 'vue'
import { RadioGroup as TinyRadioGroup, RadioButton as TinyRadioButton } from '@opentiny/vue'
import AVue from "./A/index.vue"
import BVue from "./B/index.vue"
const activeName = ref('A')
const curr= reactive({
value: markRaw(AVue)
})
const onChange = (event: any) => {
if(event==='A'){
curr.value=markRaw(AVue)
}else{
curr.value=markRaw(BVue)
}
}
【方案2】 使用路由缓存, 但是路由的keey-alive要在上级路由中添加 打开 src/layout/page-layout.vue 添加:
<router-view v-slot="{ Component, route }">
<keep-alive>
<component :is="Component" :key="route.fullPath" />
</keep-alive>
</router-view>
然后index.vue不需要变化。
结论: 想缓存keep中的路由页面,必须在keep的父级的router-view进行缓存。
Bot detected the issue body's language is not English, translate it automatically.
[Option 2] Use route cache, but the keey-alive of the route must be added to the upper-level route. Open src/layout/page-layout.vue and add:
<router-view v-slot="{ Component, route }"> <keep-alive> <component :is="Component" :key="route.fullPath" /> </keep-alive> </router-view>
Then index.vue does not need to change.
Conclusion: If you want to cache the routing page in keep, you must cache it in the router-view of the parent of keep.
Version
tiny v1.1.0
node-version
v16.20.2
Link to minimal reproduction
No response
Step to reproduce
为了实现Tabs切换功能,我要用到路由缓存keep-alive,但一直不起作用,试了很多种方法还是一样,然后新建项目试了一下还是keepalive不生效,没法实现路由缓存。
What is expected
No response
What is actually happening
No response
Any additional comments (optional)
No response