Vue 3 保持活动缓存路由

Posted 2023-02-22

【中文标题】Vue 3 保持活动缓存路由

【英文标题】：Vue 3 keep-alive cache routes

【发布时间】：2021-05-18 18:54:55

【问题描述】：

我正在使用 Vue 3 <keep-alive>。当我不使用 :key 时，它会缓存（按预期不正确地跨不同的 URL）。

通过添加

<router-view :key="$route.fullPath" v-slot=" Component ">
  <keep-alive>
    <component :is="Component" />
  </keep-alive>
</router-view>

我认为它只会在缓存键不存在的情况下进行 API 调用，这样当我转到不同的路线并返回时，它不会进行第二次 API 调用。

但是当我现在添加 :key="$route.fullPath" 时，即使我重新访问同一个 URL，它每次都会调用 API？

【参考方案1】：

在 Vue 3 中，将 key 放在 <component> 上，而不是 <router-view>：

<router-view v-slot=" Component ">
  <keep-alive>
    <component :is="Component" :key="$route.fullPath"></component>
  </keep-alive>
</router-view>

【讨论】：

老兄真棒...谢谢！我还有一个侧面问题。我已经在两个使用 keep-alive 的地方修复了这个问题，但是在另一部分我使用了一个非常复杂的选项卡式表格，当我单击不同的选项卡时它仍然被缓存。我是否需要在根据选项卡更改的“最外层”组件上添加:key="some_key"？ （最高公分母）

我应该提到我没有隐藏和显示标签。我只有一个像<base-table :items="items" /> 这样的组件，并且在该基表中是行。似乎当我切换选项卡时，我的“内联编辑”行在选项卡之间交叉，而不是特定于该选项卡的内联编辑。

不客气。很难想象您在后续问题中要问什么。您能否以与您的特定设置无关的更笼统的方式提问？