整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

Vue实现页面缓存

Vue实现页面缓存

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

keep-alive

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

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

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

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

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

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

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

效果:

某一些特定场景下,跳转页面后再返回我们不希望销毁组件,而是希望页面缓存下来,保存跳转前的状态,这时候就可以用到keep-alive组件。

要:禁止input缓存,禁止select缓存

有时候,我们页面的输入框,我们再页面里输入内容后,并不保存,但是刷新页面会发现值为输入的页面,完全没有从新去从后台取值,这是怎么回事呢?如下:

雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆

<input type="text" value="">
<select>
<option value="1">1</option>
<option value="2">1</option>
</select>

其实多数浏览器默认会缓存input的值,只有使用ctl+F5强制刷新的才可以清除缓存记录。如果不想让浏览器缓存input的值,很简单,只需要价格属性即可:autocomplete=”off”

例如上面例子,改为如下就不会缓存啦:

<input type="text" autocomplete="off" value="">
<select autocomplete="off">
<option value="1">1</option>
<option value="2">1</option>
</select>

听说还有一种直接加在form表单里也可以,但是因为我已经很久没有用form表单提交数据啦,都是用ajax异步提交的,所以我就没有采取这种方法,也很简单的如下:

<form action="#" autocomplete="off">  
<input type="text" value/>  
</form>

当然,没试过不知道行不行,应该是没问题的!