vue日记:动态keep-alive问题

需要实现的效果: 

                A页面进入B页面,缓存A页面组件

                A页面进入其他页面,不缓存A页面组件

想法:

        1.由与keep-alive的缓存状态是通过router配置的meta来改变的

router配置

        2.可以通过路由守卫来动态修改router meta设置页面的keep-alive的缓存状态达到预想效果

动态设置缓存状态

实际:

    完成是完成了,就是有点小小的问题(打死不能承认有bug)

    问题:第一次进入B页面,A页面并不会缓存,第二次进入B页面A页面才会缓存.并且进入其他页面A页面缓存并不会清除

可行方法:

    1.    暴力移除

            根据源码看来缓存的组件都会设置一个cache属性，可以通过代码强行移除掉。缺点就是没有彻底销毁依旧占内存

            具体参考

    2.使用keep-alive的include属性+vuex方法（最好）

        keep-alive提供了两个属性:

                include: 字符串或正则表达式。只有匹配的组件会被缓存。

                exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。

        

设置include 获取vuex的状态 在切换页面时改变keepalive的值

            

注:include匹配的字符串是name属性,不是路由配置中的name值,是缓存的组件中写的name属性的值；

注释

3.直接操作this.$router中对应路由元信息的keepAlive（未实践）

    

具体操作