关于使用keep-alive让DOM未重新渲染所导致的BUG解决方案

项目干货

1.参见之前的博客，项目中为了使操作友好，使用了keep-alive让后退、前进等切换路由操作，不会让某个页面的状态刷新，即保留切换路由前的状态以及数据。

比如我想在切换路由之后，上面下拉选项的值仍保留，那么就可以用到keep-alive，简单快捷。可以参考我之前的博客。

2.但是使用了keep-alive之后，页面在切换路由后不会触发DOM重新渲染，这就会带来一些问题。比如我这次遇到的通过伪类添加的小红点，在路由切换之后，回来直接错位。又比如在IE浏览器下，HUI的表格会丧失滚动条的问题。

3.这个问题比较罕见，直接搜是搜不到解决方案的。只有自己判断出来是DOM未重新渲染而导致的问题之后，才能对症下药。
解决方案如下：
vue要重新渲染一个组件怎么办？

<modal id='xxx' v-if="modalShow">...</modal>
<button @click="rerender"></button>

this.showSwipe = false;
this.$nextTick(function () {
   this.showSwipe = true;
});

使用$nextTick使在DOM加载完成后，触发重新渲染，即解决了以上问题。使用v-if来触发渲染，也是一种很巧妙的办法