vue data恢复初始化数据的实现方法

场景：当适用keepAlive保留页面的时候我们会使用到如下代码

<template>
  <div id="app">
    <!-- isRouterAlive全局刷新 -->
    <div v-if="isRouterAlive">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive">
          <!-- 这里是会被缓存的视图组件，比如列表A页面 -->
        </router-view>
      </keep-alive>

      <router-view v-if="!$route.meta.keepAlive">
        <!-- 这里是不被缓存的视图组件，比如详情B页面-->
      </router-view>
    </div>
  </div>
</template>

那么在再次进入这些页面的时候，我们需要重置该页面的原始数据，那么该如何进行呢？

解决办法

Object.assign(this.$data, this.$options.data())

  我是如此使用的

beforeRouteEnter(to, from, next) {
    next(vm => {
      if (from.name == "Navs") {
        Object.assign(vm.$data, vm.$options.data());
        vm.initPage();
      }
    });
  },