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

2017-07-09 18:49
椰子皮
3852
2
2
Vue

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

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

如下面这种列表:

QQ截图20171109134945.jpg

在APP.vue

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

activated:keep-alive 组件激活时调用

**deactivated:**keep-alive 组件停时调用

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

复制代码
activated(){
    this.getDeails();
},

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

复制代码
deactivated () {
    this.$destroy(true)
},
赏
支付宝微信
2
关注公众号获取更多内容
vue子组件传递数据给父组件
让height:auto有过度效果
共有 1 条评论
发表评论
  • 哈哈#10050
    2019-10-01 07:02
    未知
    Android

    不错真的

    回复
    • 椰子皮#10141
      2019-10-08 22:35
      未知
      Android

      感谢支持

      回复
共 1 条 第 1-1 条
每页
10
条
  • 1
不支持canvas