vue中keep-alive 前进后退时页面数据缓存和刷新问题

vue中keep-alive 前进后退时页面数据缓存和刷新问题

keep-alive用法：

1、在app.vue中定义keep-aliv

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

2、在路由文件router.js中，定义meta信息

{
  path: '/space4',
  name: 'space4',
  component: () => import( './components/workspace/space4.vue'),
  meta: {
    isUseCache: false, // 默认不缓存
    keepAlive: true,
  }
}

3、列表页的activated钩子

activated() { if(!this.$route.meta.isUseCache){ //isUseCache 时添加中router中的元信息，判读是否要缓存
      this.contactList = [] //清空原有数据
      this.contactDisplay() // 重新加载
 }
  },
  methods: {
    onClickLeft() { this.$router.go(-1)
    },
    contactDisplay() { this.contactListGet = JSON.parse(sessionStorage.getItem('contact-item'))
      let personal = this.contactListGet
      let i = 0
      for(i in personal) { // let surname = personal[i].substring(0,1)
        let surname = personal[i].substring(personal[i].length-2) this.contactList.push({'surname': surname, name: personal[i]})
      }
      console.log('contactList', this.contactList)
    }
  }

4、详细页面 beforeRouteLeave的钩子函数

beforeRouteLeave(to, from, next){ // 列表页面跳转到 详情页时，设置需要缓存
    if(to.name=='spaceContact'){
      from.meta.isUseCache = true }
    next()
  }

vue钩子函数：

设置了keepAlive缓存的组件：

第一次进入：beforeRouterEnter ->created->…->activated->…->deactivated

后续进入时：beforeRouterEnter ->activated->deactivated 可以看出，只有第一次进入该组件时，才会走created钩子，而需要缓存的组件中activated是每次都会走的钩子函数。所以，我们要在这个钩子里面去判断，当前组件是需要使用缓存的数据还是重新刷新获取数据。

keep-alive生命周期钩子函数：activated、deactivated

使用<keep-alive>会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在activated阶段获取数据，承担原来created钩子中获取数据的任务。

被包含在 <keep-alive> 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated

activated：在组件被激活时调用，在组件第一次渲染时也会被调用，之后每次keep-alive激活时被调用。

deactivated：在组件被停用时调用。