vue缓存动态组件后每次切换进入页面不能重新渲染问题的解决

一、问题描述

在vue的项目中，遇到这样的问题。当使用了keep-alive缓存动态组件以后，每次切换进入页面或者组件的时候会被缓存下来。如果进入一个页面后，使用mounted进行数据请求以后，会被缓存下来。在下一次进入页面，就不会再重新发起数据请求，直接从缓存中读取数据，就不能拿到最新的数据，对页面进行重新渲染了。这个也并不是我们所想要出现的。

二、问题解决

针对这样的问题，我们可以有两种解决办法

1. 第一种方法

在keep-alive中，有两个生命周期钩子函数，分别是activated()和deactivated()。我们可以使用activated()，在组件激活的时候会被调用，每次进入页面的时候，都会执行，在这个里面进行数据的请求，用来替代mounted。所以，只要将mounted替换为activated就可以解决问题了。

2. 第二种方法

我们可以在keep-alive中，加上一个属性exclude，属性的值就是组件的name，因为exclude是可以取消被keep-alive缓存的组件。代码示例如下：

<keep-alive exclude="detail">
    <router-view/>
</keep-alive>