发布于 

Vue如何实现组件缓存

keep-alive:组件级缓存

两种模式:全局缓存/局部组件缓存

页面跳转到详情页面时,需要保持列表页的滚动条的深度,等返回的时候也然在这个位置。

使用方式:keep-alive是抽象组件(或称为功能型组件),实际不会被渲染在 DOM树中。它的作用是在内存中缓存组件(不让组件销毁),等到下次渲染的时候,还保持其中的所有状态,并触发activated钩子函数。缓存的额需要通常出现在页面切换时

全局缓存 

1
2
3
<keep-alive>
<router-view />
</keep-alive>

局部缓存:使用keep-alive组件的include/exclude属性。include属性表示要缓存的组件名(组件定义时的name属性)

1
2
3
4
5
6
<!--缓存想要缓存的页面,实现后退不刷新-->
<!--加上v-if的判断,可以自定义想要缓存的组件,自定义在router里面-->
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

在router文件加上meta判断

1
2
3
4
5
6
7
8
9
10
11
12
13
14
export default new Router({
{
// home会被缓存
path:"/home",
component:home,
meta:{keepAlive: true}
},
{
// home不会被缓存
path:"/home",
component:home,
meta:{keepAlive: false}
}
})

注:如果想要看有没有缓存成功,可以再各个组件的created钩子里面打印输出标志,缓存成功就是首次进入页面,created会请求数据,后面就不会再次请求而是直接调用缓存的


本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。

唯獨少了個字.