vue使用keep-alive将页面缓存来达到记住列表位置

当列表页点进去详细页，然后再在详细页返回到列表页，这时候列表页又重新渲染了，如果带选项卡的的列表页，又会默认选中第一个，；伪为了解决这种尴尬以及保留组件状态或避免重新渲染，我们需要使用keep-alive。</p>

如下面这种列表：

 

在APP.vue

 <keep-alive>
   <router-view></router-view>
</keep-alive>
 

把router-view用keep-alive包起来，这样做的话，是所有的组件都缓存了，有些页面我们不需要缓存，例如详细页，这时候我们就要用到两个钩子函数了。</p>

 

activated：</span>keep-alive 组件激活时调用

deactivated：</span>keep-alive 组件停时调用

 

详细页面把请求方法写在<strong>activated钩子函数中，

activated(){
    this.getDeails();
},

但是有一些表单页面，没有请求怎么办？在<strong>deactivated中销毁组件</p>

deactivated () {
    this.$destroy(true)
},