在使用Vue开发单页面应用时，我们通常会使用Vue-Router进行页面导航，Vue-Router在进行路由切换的时候，页面是会重新加载，对应的生命周期函数也会再次执行一遍，但是在有些业务场景下，
比如：
以上两种情景都会带来很不好的用户体验。此时，就需要对列表页面进行路由缓存。在Vue-Router中可以使用keep-alive进行路由页面缓存。
通过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钩子中调用查询列表数据方法。这样每次进入的缓存页面的时候，只会更新列表数据，不会改变其他缓存。
问题：同样会存在，列表缓存数据后，返回首页，再次进入列表页面，缓存数据还在，这样可以在路由守卫beforeRouterLeave钩子中处理。
activated() {
this.getTableDatas()
},
beforeRouterLeave(to, from, next) {
if (from.name === 'Index') {
// 如果从首页进入时调用重置方法
this.reset()
}
}两点注意：
（二)、根据v-if控制显示的router-view
在路由表routes中配置meta属性，新增keepAlive属性，需要缓存的页面设置keepAlive为true.
{ path: '/list',
name: 'List',
component: List,
meta: {
keepAlive: true
}
}根据当前访问路由的keepAlive值控制是否缓存组件
// home.vue <template> ... <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> </template>
在组件的守卫钩子中修改keepAlive的值，控制页面缓存与否
// List.vue
export default {
/* 从List组件离开时,修改keepAlive值为false，保证进入该页面时页面刷新
*/
beforeRouteLeave(to, from, next) {
from.meta.keepAlive = false
next()
}
}// Detail.vue
export default {
/*从Detail返回List时，修改List的keepAlive为true,确保返回List页面时使用缓存不刷新页面
*/
beforeRouteLeave(to, from, next){
if(to.name === 'List') {
to.meta.keepAlive = true
}
next()
}
}routes：[
{
path: 'index',
component: notice,
meta: {
keepAlive: true // 是否缓存标志
}
}
]主要设置元信息（keepAlive）代表页面需要缓存
<keep-alive> // 将需要缓存得页面写在keep-alive里面 <view-router v-if="$route.meta.keepAlive"></view-router> </keep-alive> // 不需要缓存得页面写在外面 <view-router v-if="!$route.meta.keepAlive"></view-router>
页面路由跳转时将需要缓存的页面血再keep-alive标签之中，不需要缓存得页面直接显示
注： 缓存页面会使页面增加两个生命周期 activated，deactivated
其他页面进入则从新加载数据
在需要缓存的页面加入如下代码
// 在进入页面时先判断是否是从详情页面返回
beforeRouterEnter (to, from, next) {
if(to.path === '/detail') {
this.$route.meta.isBack = true
}
next()
},
activated () {
// 如果不是从详情页面返回，则重新加载数据
if (!this.$route.meta.isBack) {
//加载页面数据
}
// 从新设置页面得路由元信息
this.$route.meta.isBack = false
}进入页面先判断是否从详情返回，从详情返回在页面路由元信息中加入标志，在页面加载过程中判断是否从详情返回，是则不加载数据，否则从新加载页面数据， 最后需要再次设置页面路由元信息，防止下回默认isBack: true,其他页面进来不加载数据
以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
