在工作中，有可能会遇到需要缓存页面或组件的功能。
情况1：比如在h5中有个一个50个表单，在填到第40个表单时，需要你去另一个新页面去选择列表项，然后把数据带回来。需要我们不仅把数据带回来还要保留前面已经填好的40个表单内容不被重置。
此功能在微信小程序是可以做到的，微信小程序返回上一页内容的话，onshow以前的生命周期的不会调用的，所以表单是会被保留的。
但是vue生命周期和微信小程序不一样。如果跳转某个页面或返回上一页都是不被缓存的。
情况2：
我们可以使用 keepAlive 来缓存当前页面或组件。
keep-alive是用来缓存组件的，比如我们有个列表页，在点击详情页之后，如果返回之后不想刷新列表页，就可以用keep-alive组件进行缓存。
内置组件 | Vue.js 可以直接参考官方文档。
<KeepAlive> 包裹动态组件时，会缓存不活跃的组件实例，而不是销毁它们。
任何时候都只能有一个活跃组件实例作为 <KeepAlive> 的直接子节点。
当一个组件在 <KeepAlive> 中被切换时，它的 activated 和 deactivated 生命周期钩子将被调用，用来替代 mounted 和 unmounted。这适用于 <KeepAlive> 的直接子节点及其所有子孙节点。
keepAlive之缓存页面
可以在路由上加个标识，然后根据路由的标识加 keepAlive 标签
<keep-alive >
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"/>这样就能实现页面缓存功能
当我在password的路由下，输入框写好了密码内容。再点击其他页面，接着再返回到password页表单的11111没有被重置或清空。说明页面进行了缓存
created: function () {
console.log(1)
},
mounted: function () {
console.log(2)
},
activated: function () {
console.log(3)
},
第二次以后没有执行created 、mounted生命周期
keepAlive之缓存缓存组件
基本用法：
<KeepAlive>
<component :is="view"></component>
</KeepAlive>include：可以使用正则表达式、数组、字符串逗号分隔。如果指定，则只有与 `include` 名称 * 匹配的组件才会被缓存。
exclude：任何名称与 `exclude` * 匹配的组件都不会被缓存。
<!-- 用逗号分隔的字符串 -->
<KeepAlive include="a,b">
<component :is="view"></component>
</KeepAlive>
<!-- 正则表达式 (使用 `v-bind`) -->
<KeepAlive :include="/a|b/">
<component :is="view"></component>
</KeepAlive>
<!-- 数组 (使用 `v-bind`) -->
<KeepAlive :include="['a', 'b']">
<component :is="view"></component>
</KeepAlive>
max：最多可以缓存多少组件实例
<KeepAlive :max="10">
<component :is="view"></component>
</KeepAlive>如果遇到非组件下，不想让表单缓存的话可以参考另一篇文章文章来源：https://www.toymoban.com/news/detail-479781.html
使用深拷贝解决表单回显上一次数据问题_三线码工的博客-CSDN博客vue表单回显上一次数据问题.表单缓存问题。深拷贝的使用方法https://blog.csdn.net/qq_35946021/article/details/124265362文章来源地址https://www.toymoban.com/news/detail-479781.html
到了这里，关于vue解决浏览器中跳转新页面缓存上一页表单等内容方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
