开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第24天，点击查看活动详情
使用情景
在使用 Vue 开发单页面应用时，我们通常会使用 Vue-Router 进行页面导航，Vue-Router 在进行路由切换的时候，页面是会重新加载，对应的生命周期函数也会再次执行一遍，但是在有些业务场景下。
比如：
- 在有分页数据列表中，切换到第三页需要查看列表对应数据的详情页面，然后返回，如果不加任何处理，列表页面会重新加载，默认显示第一页数据，而不在是之前的第三页，这样如果还需要查看之前查看数据的下一条时，还需要切换到第三页，如此反复。
- 在列表页面进行条件筛选查询，查询到对应的数据后查询详情，跳转详情页面，然后在返回，列表默认会清空查询条件，显示所有数据。
以上两种情景都会带来很不好的用户体验。此时，就需要对列表页面进行路由缓存。在 Vue-Router 中可以使用 keep-alive 进行路由页面缓存。
keep-alive 基本认识
- Vue 中提供了一个内置组件
keep-alive，使用<keep-alive>元素将动态组件包裹起来，内部组件就会被缓存起来。 <keep-alive>包裹的组件，加载过的页面，再次进入时，是不会执行页面第一次进入时的部分生命周期函数。<keep-alive>包裹的组件会新增两个生命周期函数activated和deactivated。- 两个属性
include和exclude可以让<keep-alive>实现有条件的进行缓存。include包含的组件会被进行缓存，exclude包含的组件不会被缓存。
keep-alive 实现路由页面缓存
使用 include 控制需要缓存的页面
// home.vue
<template>
<div>
...
<keep-alive :include='cashViews'>
<router-view></router-view>
</keep-alive>
</div>
</template>
<script>
export default{
data() {
return {
// 要缓存的组件
cashViews: ['list']
}
}
}
</script>
// list.vue
<script>
export default{
// 在组件内路由守卫钩子函数中处理逻辑
beforeRouteEnter (to, from, next) {
if (from.name === 'Index') { // 处理页面缓存后，返回首页再次进入缓存页时数据为更新
// 该生命周期无法获取到this，因此把vm实例当作参数传递
next(vm => {
vm.pages.pageNum = 1
// 因为我这里查询表单是动态的，所以首页进入时需要调用一次，在改方法中请求返回后调用了获取列表数据getTableDatas方法
vm.getQueryList()
})
} else if (!from.name) { // 处理刷新页面时，获取动态表单方法未执行，导致表单无法加载
next(vm => {
vm.getQueryList()
})
} else {
// 详情返回时只更新列表数据，因为如果在详情页面做了操作，列表数据状态会改变，其他使用缓存
next(vm => {
vm.getTableDatas()
})
}
}
}
</script>
以上实现，是针对我自己项目业务场景的实现，如果查询表单不是动态获取的，是页面写死的，可以在 activated 钩子中调用查询列表数据方法。
