问题场景： 当某个带有筛选条件查询列表的页面需要进行缓存，以便不再需要重复进行选择或者输入筛选条件的时候，我们就可以利用keepAlive来进行缓存，但keepAlive也存在着一些坑，这是需要注意的地方。

如何利用keepAlive进行缓存
1、在路由meta内定义keepAlive，来设置需要被缓存的页面

meta: { keepAlive: true }
ture: 需要缓存的路由；false:不需要缓存的路由

2、判断router-view

<keep-alive>
 <router-view v-if="$route.meta.keepAlive"/>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
被keep-alive包裹的为需要缓存的页面，这样我们就可以通过keepAlive来切换哪些页面需要缓存，哪些不需要缓存。
3、进入详情页面缓存，否则不缓存
beforeRouteLeave (to, from, next) {
   if (to.path === '/index/page1/detail') {
     from.meta.keepAlive = true
     next()
   } else {
     from.meta.keepAlive = false
     next()
路由守卫钩子 beforeRouteLeave 离开页面路由的时候出发； 当离开缓存页面，进入详情页面的时候，我们将缓存页面keepAlive设置true，如果离开缓存页面，不是进入详情页面的时候，我们设置为false，不进行缓存。
这是最基本的缓存设置，但是keepAlive也留下了一个大坑。
keepAlive二次进入页面显示首次缓存问题

第一次从缓存页面进入详情页再返回到缓存页面的时候，页面条件能被正确的缓存下来，但是当我们切换到别的路由，再一次进入该缓存页修改查询条件，并进入详情后返回缓存页，此时缓存的是页面状态是第一次进入该页面的时候的状态，也就是说，第二次进入页面的时候，该缓存读取的是第一次的缓存，这就非常的坑了。 所以通过下面的刷新缓存路由的方式来解决这个问题。
1、调整 router-view
// view
<keep-alive v-if="isRouterAlive">
 <router-view v-if="$route.meta.keepAlive"/>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
// js
data () {
 return {
   isRouterAlive: true
provide () { return { reload: this.reload } },
methods: {
 reload () {
   this.isRouterAlive = false
   this.$nextTick(() => (this.isRouterAlive = true))
定义一个isRouterAlive变量，用来刷新keep-alive;通过provide向下面子孙组件们暴露一个reload方法，用来刷新缓存。
2、设置缓存
export default {
inject: ['reload'],
data () {
  return {
beforeRouteEnter (to, from, next) {
   to.meta.keepAlive = true
   if (from.path !== '/index/page1/detail') {
     next(vm => {
       vm.reload()
   } else {
     next()
 beforeRouteLeave (to, from, next) {
   if (to.path === '/index/page1/detail') {
     from.meta.keepAlive = true
     next()
   } else {
     from.meta.keepAlive = false
     next()