keepAlive缓存数据后恢复data的初始数据

keep-alive的生命周期

初次进入时：created > mounted > activated；退出后触发 deactivated
再次进入：会触发 activated；事件挂载的方法等，只执行一次的放在 mounted 中；
组件每次进去执行的方法放在 activated 中

实现keepAlive

<div id="app" class='wrapper'>
    <keep-alive>
        <!-- 需要缓存的视图组件 --> 
        <router-view v-if="$route.meta.keepAlive"></router-view>
     </keep-alive>
      <!-- 不需要缓存的视图组件 -->
     <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>

路由中设置keepAlive

{
  path: 'list',
  name: '路由名字', 
  component (resolve) {
    require(['地址'], resolve)
 },
 meta: {
  keepAlive: true,
  title: 'xxx'
 }
}

场景：从A页面进入B页面 B页面中修改data的值 如果进入c页面 则使用keepAlive进行页面缓存 如果返回A页面 则进行data恢复初始数据

实现

beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.$nextTick(() => {
        if (from.path !== 'C页面路由名字') {
        //this.$data是表示当前的改变后的this中的数据
        //而this.$options.data()是表示没有赋值前的this中的数据,表示初始化的data.
          Object.assign(vm.$data, vm.$options.data()) 
          vm.initData() //进入页面后的初始化的方法
        }
      })
    })
  },