深入理解Vue keep-alive及实践总结

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

在 B 组件里面设置 beforeRouteLeave：

export default {
    data() {
      return {};
    },
    methods: {},
    beforeRouteLeave(to, from, next) {
       // 设置下一个路由的 meta
      to.meta.keepAlive = true; // 让 A 缓存，即不刷新
      next();
    }
};

在 C 组件里面设置 beforeRouteLeave：

export default {
    data() {
      return {};
    },
    methods: {},
    beforeRouteLeave(to, from, next) {
      // 设置下一个路由的 meta
      to.meta.keepAlive = false; // 让 A 不缓存，即刷新
      next();
    }
};

这样便能实现 B 回到 A，A 不刷新；而 C 回到 A 则刷新。

防坑指南

1.keep-alive 先匹配被包含组件的 name 字段，如果 name 不可用，则匹配当前组件 components 配置中的注册名称。
2.keep-alive 不会在函数式组件中正常工作，因为它们没有缓存实例。
3.当匹配条件同时在 include 与 exclude 存在时，以 exclude 优先级最高(当前vue 2.4.2 version)。比如：包含于排除同时匹配到了组件A，那组件A不会被缓存。
4.包含在 keep-alive 中，但符合 exclude ，不会调用 activated 和 deactivated。

实现前进刷新，后退不刷新

感谢 iceuncle 分享的 《vue实现前进刷新，后退不刷新》。

总结

路由大法不错，不需要关心哪个页面跳转过来的，只要 router.go(-1) 就能回去，不需要额外参数。

在非单页应用的时候，keep-alive 并不能有效的缓存了= =

keep-alive生命周期钩子函数：activated、deactivated

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

附录

生命周期函数：就是vue在某个时间段会自动执行的函数

beforeCreate(){}在执行的时候，data还有methods都没有被初始化
created(){} data还有methods都被初始化好了，如果要调用 methods 方法或者操作 data 里面的数据，最早只能在 created 里面进行操作。
beforeMount(){} 表示模板已经在内存中编辑完成了，但是尚未渲染到模板页面中。即页面中的元素，没有被真正的替换过来，只是之前写的一些模板字符串。
mounted(){} 表示内存中模板已经真实的挂载到页面中去了，用户可以看到渲染好的界面了

注意这是一个生命周期函数的最后一个函数了，执行完这个函数表示 整个vue实例已经初始化完成了，组件脱离了创建阶段，进入运行阶段。