关于vue 页面缓存 keepalive相关

如何在vue中缓存页面和组件，在后退页面是继续保持之前的状态

• keep-alive

  keep-alive 可以让其内部的组件或者页面在被切换走时不销毁，缓存该组件的状态。通过在路由中配置meta中的配置判断是否缓存 keepAlive包裹的页面或者组件

  <keep-alive v-if="$route.meta.keepAlive">
      <router-view />
  </keep-alive>
  <router-view v-else/>

   

  属性

  • include：属性值可以是字符串或正则表达式，只有组件名与该属性名匹配时，组件才会被缓存；

  • exclude：属性值可以是字符串或正则表达式，只要组件名与该属性名匹配时，组件不会被缓存；

  生命周期

  所有被 keep-alive 包裹的组件，除了基本的生命周期函数外，还会新增两个生命周期函数：

  • activated：进入组件时触发

  • deactivated：离开组件时触发

• 路由配置

  {
    name: 'avatarReview',
    path: 'avatarReview',
    component: () => import('@/views/review/avatarReview'),
    meta: {title: '头像审核', parents: '审核中心 ', keepAlive: true}
  }

   

• 如何让缓存的组件刷新状态，默认情况下当我们回退页面时，会保持原来的状态但是不会更新页面，如果要刷新页面可以在对应页面中的 activated函数中进行操作，而不是在create或者mounted如下

  /*created() {
     this.getList()
  },*/
  activated() {
      this.getList()
  }