Vue 3 keep-alive cache routes(Vue 3 保持活动缓存路由)
问题描述
我正在使用 Vue 3 <keep-alive>
.当我不使用 :key
时,它会缓存(按预期不正确地跨不同的 URL).
I'm using Vue 3 <keep-alive>
. When I don't use :key
it caches (improperly across different URLs as expected).
通过添加
<router-view :key="$route.fullPath" v-slot="{ Component }">
<keep-alive>
<component :is="Component" />
</keep-alive>
</router-view>
我认为它只会在缓存键不存在的情况下进行 API 调用,这样当我转到不同的路线并返回时,它不会进行第二次 API 调用.
I would think that it only makes an API call if the cache key doesnt exist, so that when I go to a different route and come back, it won't make a second api call.
但是当我现在添加 :key="$route.fullPath"
时,即使我重新访问同一个 URL,它每次都会调用 API?
But when I add :key="$route.fullPath"
now it makes an API call every single time even if I revisit the same URL?
推荐答案
在 Vue 3 中,将 key
放在
而不是 <路由器视图>
:
In Vue 3, put the key
on the <component>
rather than the <router-view>
:
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" :key="$route.fullPath"></component>
</keep-alive>
</router-view>
这篇关于Vue 3 保持活动缓存路由的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:Vue 3 保持活动缓存路由
基础教程推荐
- 当用户滚动离开时如何暂停 youtube 嵌入 2022-01-01
- 角度Apollo设置WatchQuery结果为可用变量 2022-01-01
- Karma-Jasmine:如何正确监视 Modal? 2022-01-01
- 动态更新多个选择框 2022-01-01
- 我什么时候应该在导入时使用方括号 2022-01-01
- 在 JS 中获取客户端时区(不是 GMT 偏移量) 2022-01-01
- 有没有办法使用OpenLayers更改OpenStreetMap中某些要素 2022-09-06
- 在for循环中使用setTimeout 2022-01-01
- 悬停时滑动输入并停留几秒钟 2022-01-01
- 响应更改 div 大小保持纵横比 2022-01-01