Vue设置keepAlive不⽣效问题及解决
⽬录
设置keepAlive不⽣效
1.在App.vue中的设置
2.在router中的index.js设置
keep-alive缓存组件不⽣效的坑
坑出现背景
坑的原因
代码如下
设置keepAlive不⽣效
如演⽰，Vue页⾯导航回退后页⾯重新刷新了，搜索条件及结果都重置了，对于页⾯需要频繁切换的系统来说，体验不佳，我们希望页⾯第⼀次打开时加载，此后回退不再刷新
查阅了Vue官⽹后，发现vue2.0提供了⼀个keep-alive组件。
1.在App.vue中的设置
<template>
<div id="app">
<keep-alive>
<router-view v-if="$a.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$a.keepAlive"></router-view>
</div>
</template>
2.在router中的index.js设置
利⽤meta属性
export default[
{
path:'/',
name:'home',
components:Home,
meta:{
keepAlive:true //需要被缓存的组件
},
{
path:'/book',
name:'book',
components:Book,
meta:{
keepAlive:false //不需要被缓存的组件
}
]
正常的话这样页⾯就能缓存并⽣效了，如果还是不⽣效
检查这个组件在router⽂件中的配置name和组件实例中的name不⼀致，如下⾯，全局守卫中拿到的to或from的name是从router中对应的路由对象中拿的，⽽App.js 中的keepAlive标签中的exclude是对⽐的组件实例中的name
使⽤过程发现，组件的name和router配置的name不⼀样，keep-alive也⽆法⽣效，这⾥也提供给我们⼀种思路，如果页⾯不需要缓存，把name设置不⼀样就好了（不推荐使⽤）
keep-alive缓存组件不⽣效的坑
坑出现背景
在维护公司代码时发现⾥⾯写watch route不⽣效，⽆法监听⼦路由的table切换。组件不会缓存，但是全局组件已经做过缓存处理。此处每次进⼊此table页都会触发created周期。花费⼤半个⼩时之后终于
react router缓存
到了问题点
坑的原因
keep-alive缓存时include中的名字必须与组件上的名字完全⼀致，组件没有写名字或者名字不⼀致就会导致缓存失效，每次进⼊组件都触发created⽣命周期
代码如下
全局组件中
<keep-alive include="history">
<router-view></router-view>
</keep-alive>
组件中
export default {
name: "history",/*此处的name必须有且与include中的⼀致*/
components: {
VTable
},
如是，问题解决!
以上为个⼈经验，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。