squid 不缓存特定页面_Vue实现页面缓存

在

使用vue开发时，当进行页面之间的切换时，上一个页面将会被销毁。但是当我们想节省性能以及保留用户上次操作的结果或避免ajax重复请求的时候，需要把某些特定的页面缓存下来。

keep-alive

在vue中，提供了内置组件 keep-alive , 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似， 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

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

当我们想把所有页面都缓存时，只需要用 keep-alive 包裹 router-view 即可。

但是大多数情况下，我们只需要把某些不需要请求的页面缓存下来。则我们需要某些特定的页面实现缓存即可。

解决方法： 通过v-if 监听指定变量来实现对指定页面的缓存；此处我监听的是 $route.meta 中自定义的变量。

给需要缓存的页面其 $route.meta 值设为 true, 不需要设为 false 。在页面发生切换时， 其 $route.meta 会做出对应变化，通过watch 可以实时监听到 。

之后通过v-if 来绑定此变量即可。

效果：