问题场景：当查询列表中有过滤条件的页面需要缓存时，不再需要重复选择或输入过滤条件，我们可以使用keepAlive进行缓存，但是keepAlive也有一些坑，需要注意。

如何用keepAlive缓存

1.在路由元中定义keepAlive来设置要缓存的页面

meta: { keepAlive: true }

Ture:需要缓存的路由；True :不需要缓存的路由

2.确定路由器视图

点火电极

router-view v-if=' $ route . meta . keepalive '/

/保持活力

路由器-查看v-if='！$ route . meta . keepalive '/路由器视图

需要缓存的页面由keep-alive包装，所以我们可以通过keep-alive切换哪些页面需要缓存，哪些不需要缓存。

3.输入详细信息页面缓存，否则不会缓存

beforeRouteLeave前进(到、从、下一个){ 0

if(to . path==='/index/page 1/detail '){ 0

from.meta.keepAlive=true

下一个()

} else {

from.meta.keepAlive=false

下一个()

}

}

路由离开页面路由时，路由保护挂钩在路由离开之前开始；当离开缓存页面并进入详细信息页面时，我们将缓存页面keepAlive设置为true。如果离开缓存页面不是进入详细信息页面的时间，我们将其设置为false并且不缓存。

这是最基本的缓存设置，但keepAlive也会留下一个大洞。

KeepAlive的第二个条目页面显示了个缓存问题

当次从缓存页面进入详细页面，然后返回到缓存页面时，可以正确缓存页面条件。但是，当我们切换到另一个路由时，我们再次进入缓存页面修改查询条件，输入详细信息后返回缓存页面。此时，缓存的页面状态是次进入页面时的状态。也就是说，第二次进入页面时，缓存读取个缓存，非常坑。因此，这个问题可以通过如下刷新缓存路由来解决。

1.调整路由器视图

//查看

keep-alive v-if=' isrueralive '

router-view v-if=' $ route . meta . keepalive '/

/保持活力

路由器-查看v-if='！$ route . meta . keepalive '/路由器视图

//js

数据(){ 0

返回{

isRouterAlive: true

}

},

provide(){ return { reload : this . reload } }，

methods: {

reload(){ 0

this.isRouterAlive=false

这个。$ NextTick(()=(this . isRuraLive=true))

}

}

定义一个isRouterAlive变量来刷新保持活动状态；通过提供，重载方法被公开给以下后代组件，这些组件用于刷新缓存。

2.设置缓存

导出默认值{

inject: ['reload']，

数据(){ 0

返回{

.

},

},

在路由器之后(到，从，下一个){之前

to.meta.keepAlive=true

if (from.path！=='/index/page 1/detail '){ 0

下一个(vm={

vm.reload()

})

} else {

下一个()

}

},

beforeRouteLeave前进(到、从、下一个){ 0

if(to . path==='/index/page 1/detail '){ 0

from.meta.keepAlive=true

下一个()

} else {

from.meta.keepAlive=false

下一个()

}

}

}

子组件注册inject: ['reload']方法。进入缓存页面时，beforeRouteEnter钩子通过传递来确定路由是否来自详细信息页面。如果不是详情页，我们会刷新缓存，如果是详情页，我们不会处理。这样，只要路由已经进入其他页面(非详细页面)，我们就会刷新缓存，这样当路由再次进入时，不会显示个缓存状态，从详细页面返回后缓存数据会正常显示。