用tsx开发vue项目时，使用keep-alive遇到的坑

背景

项目中要缓存页面a，但是不缓存页面b，在网上搜了用v-if的方法能使用但是有问题。后来还是看官网用了include才可以，但是这里也有要注意的一点。

开发时

先是用了v-if，在tsx中要使用三元运算符。但是有一个问题就是，我跳b页面的时候b页面可以不缓存，但是从b页面返回a页面的时候，a页面也不缓存了，导致了重新渲染。但是假如设置b页面也为缓存，那么b返回a时，a就不重新渲染了，但是不满足需求。主要是因为v-if在不满足的时候，会直接销毁，导致跳b的时候，销毁了a，所以b返回a的时候，a的缓存也没了。

this.$route.meta.keepAlive ?
<keep-alive><router-view></router-view></keep-alive>
: <router-view></router-view>

后来查阅vue文档，使用keep-alive的include属性，在开发的时候，完美的解决了这个问题

// 指定要混存的页面name，对应vue模版语法里面的name属性，比如要缓存a和c，用逗号隔开
export default class Index extends Vue {  
    private includes = 'a,c'
}

<keep-alive include={this.includes}>
    <router-view></router-view>
</keep-alive>

打包后上线后

本来以为完美的解决了问题，结果发现线上根本不缓存。其余几个页面也都不缓存。苦思冥想之后，觉得应该是name不对，因为我们打包的时候，webpack会把我们的一些变量名等等都弄成简写的方式，而我在定义的时候，用的是组件的原始名称。
因为tsx写vue的时候，导出的类名就是这个组件的名字。所以我们要在用router-view的组件里，倒入需要缓存的组件。然后去取类的名字，之后就大功告成。完美！

// tsx格式的时，name就是PageA，但是打包的时候可能就变成了其他名字
export default class PageA  extends Vue {}

// 导入这个组件，取它的name，这样即使打包过后，也能保持名字一致。
import PageA from './pages/PageA'
export default class Index extends Vue {  
    private includes = `${PageA.name}`;
}