Vue.js前端开发实战指南 -- Keepalive

Keep Alive 动态组件

让切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数

// App.vue
<template>
  <div id="app">
    <transition :name="transitionName">
      <keep-alive :include="/keep/">
          <router-view class="child-view"></router-view>
      </keep-alive>
    </transition>
  </div>
</template>

实现方式： 列表页组件的name以keep开头

  export default {
    name: 'keepGoodsManage',
    activated() {
      ...
    }
    ...
    }

使用KeepAlive模式之后，activated()钩子就被激活了，当keep的页面显示的时候就会调用activated, 我们可以在这里进行数据的刷新工作

---

最后欢迎大家加入
Vue前端开发实战群， 群号： 530276459
一起学习，一起成长