使用 vue-router的keep-alive的一次踩坑记录

使用 vue-router的keep-alive的一次踩坑记录

背景：vue项目，需要缓存某些页面中的一个页面，于是就想到了keep-alive,于是屁颠屁颠的拿来用了，简单的从一个页面跳转到另一个页面再返回，ok页面被缓存了，天真的我就把代码一通提交，第二天测试才发现原来keep-alive有坑。。。

先放一段我的心路历程

1、有三个页面A、B、C；B页面需要被缓存，其他页面不缓存，我在B页面的路由里面加了meta: {keepAlive: true } ，
vue页面添加判断，这种方法网上很多很容易找到，就不放具体代码了，主要说下思路

	<keep-alive>
    	<router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>

2、页面 A->B->C
A->B B不缓存
C->B B缓存
3、我在B页面加了路由离开的监听，
判断B到C的时候，把B的keepAlive设置为true,
如果从B到A的时候，把B的keepAlive设置为false
4、问题是，第一遍从A->B->C，再顺序返回的时候，B页面的缓存是正常的，第二遍再从A->B->C，顺序返回的时候，B页面缓存的是第一次的缓存
为什么会一直缓存第一次加载过的页面？？？怪我才疏学浅，暂时还搞不清楚
在网上找了很多例子，修改router.options的等等，不行

我的解决办法

利用activated解决

<keep-alive include="a">
      <router-view ></router-view>
</keep-alive>

1、使用 include属性缓存需要的页面，这个我只需要缓存一个就写固定值了，这个值是可以动态的；
2、在vuex中定义一个全局变量 isUpdate
3、然后在B页面添加路由离开的监听

beforeRouteLeave (to, from, next) {
        if (to.name === 'c') {
            this.$store.commit('map/setPageUpdate', false)
        } else {
            this.$store.commit('map/setPageUpdate', true)
        }
        next()
    }

4、在a和c页面，使用 activated 生命周期函数（使用keep-alive之后会出现 actived 和deactived两个生命周期函数）

//在a和c页面
activated () {
        let isUpdate = this.$store.state.map.isUpdate
        if (isUpdate) {
            //如果要更新，就做更新的操作
        }
    },

总结

此方法仅适用于需要缓存某个页面，多个页面的缓存不赞成此方法，后续有更好的方法再更新