vue 路由缓存

Posted 2023-04-24

参考技术A

在写一个移动端项目时遇到了一个问题，每一个tab栏所对应的页面被封装成一个组件进行

复用，结果会导致他们共用一个滚动条。解决办法是给这个子组件加固定的高度（例如

height:100vh），同时加一个属性overflow-y:auto，这样就可以解决这个问题。之后发现每当进

入主页中任意一篇文章再退出时，页面重新加载渲染了，之前的文章消失了，所有在这里想到

了路由缓存。

先说一下keep-alive的属性和用法。

Props ：

用法 ：

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。

当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

（只有被<keep-alive>包裹的组件才具有这两个钩子函数）

其实不太建议使用include的，因为如果多个组件中都包括include中匹配到的组件，想单独

的让其中某个组件缓存是不太方便的。所以可以在分发路由时，在需要缓存的路由中把额外标

记的属性写在meta中，如图1。

使用的时候可以在根组件中通过$route.meta.keepAlive取到该值，然后进行v-if判断即可，如图

2，这样使用起来相对灵活一点。

使用keep-alive缓存路由后，已经解决了主要问题，但是有新的问题出现。缓存过的组件重

新被激活时不会记录滚动条的状态，默认置顶，所以应该监听这个被复用的组件的onscroll事

件，动态记录滚动条的位置状态，然后重新赋值给scrollTop（如果还想优化最好给滚动事件来

一个防抖处理）。那么问题来了，应该在何时重新赋值呢？上面用法中提到了当组件在<keep-

alive> 内被切换时会触发activated这个钩子函数，所以应在这里赋值。

Vue 3 保持活动缓存路由

【中文标题】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" /> 这样的组件，并且在该基表中是行。似乎当我切换选项卡时，我的“内联编辑”行在选项卡之间交叉，而不是特定于该选项卡的内联编辑。

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