前面我们知道了如果获取数据,如何删除数据。但是有个小问题,我们每次进入列表页面的时候,都会重新去获取数据,这个不太美好,如果数据变化不是那么快的场景,完全没有必要浪费网络资源。
目标:
- 首次进入列表加载数据
- 返回首页,再次进入列表,不加载新数据
- 用户顶部下拉,加载新数据
- 滑动到底部,加载旧数据
- 子页面,或者其他页面对列表数据删除,返回列表页查看数据已经删除
1. keepalive
为了使列表页面不再每次刷新,用到vue的keepalive特性。查看官网的说明
https://cn.vuejs.org/v2/api/#keep-alive
主要用于保留组件状态或避免重新渲染。
keep-alive 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们
keep-alive 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。
由官网的说明我们知道,默认情况下被<keep-alive>
包裹的组件,将会被缓存,不会刷新视图和请求新数据。那么我们就来看看怎么使用这个组件?
因为我们使用的是router-view的方式,所有的页面都是展示在router-view里面,而最顶级的router-view在App.vue中。【子页面里面也可以加入router-view组件,做二级,或者三级页面,这里我们先不去讨论这个话题】
那么我们就要对App.vue进行修改,但是因为App.vue是顶级root,如果我们把这里的router-view进行缓存了,非列表页,比如用户详情页是动态的,不需要缓存的话怎么修改?那么就需要确定每个页面是否需要缓存,用到了route的meta属性
改造router.js
将需要缓存的页面,添加meta属性
【我们设置Users.vue页面为缓存】
{
path: '/users',
name: 'users',
component: _import('views/users/Users'),
meta: {
keepAlive: true }
},
使用这个属性,改造App.vue:
<template>
<div id="app">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-vi