Vue中keep-alive结合router实现部分页面缓存

实践部分：

我的这个page页面如果选中了，然后跳转到别的页面再回来发现选中的内容消失。

我希望实现出去之后跳转回来内容还在。

原来我的项目里有两处router-view

我没有成功设置好组件的缓存

6.29 希望以后有时间能够完善一下吧。

详解vue组件的keep-alive_你永远在 this.$parent 中找不到 keep-alive-CSDN博客

Vue 生命周期总结

1. 有哪些生命周期

系统自带的生命周期：

• beforeCreate

• created

• beforeMount

• mounted

• beforeUpdate

• updated

• beforeDestroy 可以清理一下定时器

• destroyed

2. 进入页面或组件时，执行的生命周期顺序

1. beforeCreate

2. created

3. beforeMount

4. mounted

3. $el 和 $data 在各阶段的情况

 created` 阶段已有 `$data`，`mounted` 阶段才有 `$el

• beforeCreate：既没有 $el，也没有 $data

• created：有 $data，但没有 $el

• beforeMount：有 $data，但没有 $el

• mounted：既有 $data，也有 $el

$el表示DOM元素

$data表示数据 方法的状态和数据保持一致 如果$data有了，那么方法也可以调用了

4. 使用 keep-alive 时新增的生命周期

• activated（组件激活时触发）

• deactivated（组件失活时触发）

5. 第一次进入 keep-alive 缓存的组件时，执行的生命周期

1. beforeCreate

2. created

3. beforeMount

4. mounted

5. activated

6. 第二次或第 N 次进入 keep-alive 缓存的组件时，执行的生命周期

仅执行 activated

(^▽^)针对这些特性：

https://juejin.cn/post/7342337684646051879

关于 keep-alive 的一些最佳实践：

• 将只执行一次的事件挂载方法都放到 mounted 中

• 将组件每次进入时需要执行的方法放在 activated 中

keep-alive 可以接收 3 个属性做为参数，用于匹配相应的组件进行缓存：

keep-alive参数：

• exclude 要排除的组件（以为字符串，数组，以及正则表达式，任何匹配的组件都不会被缓存）

• include 要缓存的组件（可以是字符串、数组或正则表达式，任何匹配的组件都不会被缓存）

• max 缓存组件的最大值（类型为字符或数字，可以控制缓存组件的个数）

注意：当使用正则表达式或数组时，务必使用 v-bind（就是冒号开头的属性）

exclude、include 同时存在时，exclude 优先级更高