使用keepAlive缓存页面，一是减少服务器请求次数，二可以在用户返回上一页时可以保存上次浏览位置
1、使用 keep-alive 可以缓存当前组件
2、概念理解
-
keep-alive是vue中的内置组件，能在组件的切换过程中将状态保留在内存中，避免组件被重复渲染
-
keep-alive在包裹动态组件的时候，会缓存不活跃的组件实例，而不是销毁它
-
keep-alive具有的属性
-
include：只有被包含的才会被缓存，包含的是组件中定义 name 属性的值如果要缓存多个组件，将其名字使用 , 逗号隔开即可
-
exclude：值有写在里面的组件不会被缓存，其余所有组件都会被缓存
如果要处理多个组件，将其名字使用 , 逗号隔开即可
-
max：最多可以缓存多少个实例
-
代码理解：
3、使用步骤
-
先使用 keep-alive 组件在App.vue中使用
-
在需要缓存的页面中使用钩子函数：onActived、onDeactived，两者要配合keep-alive才有用
-
onActived：进入组件
-
onDeactived：离开组件
4、缓存后更新
● beforRouteEnter（组件内守卫）：每次组件渲染的时候，都会执行
● actived：在keep-alive缓存的组件被激活是，都会执行 active 钩子
扩展：
1、路由守卫：
-
全局守卫
-
前置守卫 beforeEach : 在路由跳转之前要执行的函数
-
解析守卫 beforeResolve : 排错，处理问题用的
-
后置守卫 afterEach : 可以将网站上面的标题改为相对应页面的标题
-
独享守卫 beforeEach : 当路由进入了设置独享守卫的页面才有用，进入其他页面没有用
-
组件内守卫（只有组件内守卫才有route）
-
**beforeRouteEnter ：**渲染组件前被调用
-
beforeRouteUpdate : 路由发生变化时跳转
-
beforeRouteLeave: 路由离开当前组件时调用
2、keep-alive的生命周期
正常生命周期：
beforeRouteEnter --> created --> mounted --> updated -->destroyed
使用keepAlive后生命周期：
首次进入缓存页面：
- beforeRouteEnter --> created --> mounted --> activated --> deactivated
再次进入缓存页面：
-
beforeRouteEnter --> activated --> deactivated
-
activated keep-alive组件激活时调用，该钩子在服务器端渲染期间不被调用。
-
deactivated keep-alive组件停用时调用，该钩子在服务端渲染期间不被调用。
