关于vue keep-alive用法的总结

是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
用法1：include(包含): 字符串或正则表达式。只有匹配的组件会被缓存。
exclude（除了）: 字符串或正则表达式。任何匹配的组件都不会被缓存。

// 组件
export default {
  name: 'test-keep-alive',
  data () {
    return {
        includedComponents: "test-keep-alive"
    }
  }
}

用法2：可以动态配置路由，来确定那些路由需要缓存哪些不需要缓存，这样的话就需要修改route文件下的index.js文件：

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello,
      meta: {
        keepAlive: false // 不需要缓存
      }
    },
    {
      path: '/page1',
      name: 'Page1',
      component: Page1,
      meta: {
        keepAlive: true // 需要被缓存
      }
    }
  ]
})

2.1特殊需求：
首页是A页面
B页面跳转到A，A页面需要缓存
C页面跳转到A，A页面不需要被缓存
（例：详情跳列表，首页跳列表）

{
    path: '/',
    name: 'A',
    component: A,
    meta: {
        keepAlive: true // 需要被缓存
    }
}

2.1.1第一种写法

router.beforeEach((to, from, next) => {
  // console.log(to.path,'to...');
  // console.log(from.path,'from...');
  //判断是否需要缓存
    if(to.path == '/a' && from.path == '/b'){
      to.meta.keepAlive = true;  // 让 首页 缓存，即不刷新
      next();
    }else {
      to.meta.keepAlive = false;  // 让 列表页 即不缓存，刷新
      next();
    }
})

2.1.2第二种写法

export default {
    data() {
        return {};
    },
    methods: {},
    beforeRouteLeave(to, from, next) {
         // 设置下一个路由的 meta
        to.meta.keepAlive = true;  // B 跳转到 A 时，让 A 缓存，即不刷新（有类型的列表也可以运用缓存，返回到上一步指定的类型）
        next();
    }
};
export default {
    data() {
        return {};
    },
    methods: {},
    beforeRouteLeave(to, from, next) {
        // 设置下一个路由的 meta
        to.meta.keepAlive = false; // C 跳转到 A 时让 A 不缓存，即刷新
        next();
    }
};

keep-alive生命周期钩子函数：activated、deactivated
使用会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在activated阶段获取数据，承担原来created钩子中获取数据的任务。