当列表页点进去详细页,然后再在详细页返回到列表页,这时候列表页又重新渲染了,如果带选项卡的的列表页,又会默认选中第一个

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

如下面这种列表:

QQ截图20171109134945.jpg


在APP.vue

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

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


activatedkeep-alive 组件激活时调用

deactivated:keep-alive 组件停时调用


详细页面把请求方法写在activated钩子函数中,

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

但是有一些表单页面,没有请求怎么办?在deactivated中销毁组件

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