vue手撸移动端后台（9）keepalive和页面通信

前面我们知道了如果获取数据，如何删除数据。但是有个小问题，我们每次进入列表页面的时候，都会重新去获取数据，这个不太美好，如果数据变化不是那么快的场景，完全没有必要浪费网络资源。

目标：

• 首次进入列表加载数据
• 返回首页，再次进入列表，不加载新数据
• 用户顶部下拉，加载新数据
• 滑动到底部，加载旧数据
• 子页面，或者其他页面对列表数据删除，返回列表页查看数据已经删除

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