Vue中保持页面状态的终极方案

// List.vue
export default {
  data() {
    return {
      list: [],
      page: 1,
      searchQuery: '',
      scrollTop: 0
    };
  },

  created() {
    // 恢复状态
    const saved = localStorage.getItem('listState');
    if (saved) {
      const state = JSON.parse(saved);
      // 只在“返回”时恢复（通过 flag 控制）
      if (state.fromDetail) {
        Object.assign(this.$data, state.data);
      }
    }
  },

  beforeDestroy() {
    // 保存状态
    const state = {
      fromDetail: true, // 标记来源
      data: {
        list: this.list,
        page: this.page,
        searchQuery: this.searchQuery,
        scrollTop: this.scrollTop
      },
      timestamp: Date.now()
    };
    localStorage.setItem('listState', JSON.stringify(state));
  },

  methods: {
    saveScroll() {
      this.scrollTop = this.$el.scrollTop;
    }
  }
}

// 在路由守卫中清除标记
router.beforeEach((to, from, next) => {
  if (to.name !== 'List' && from.name === 'List') {
    const saved = localStorage.getItem('listState');
    if (saved) {
      const state = JSON.parse(saved);
      state.fromDetail = false; // 下次进入不恢复
      localStorage.setItem('listState', JSON.stringify(state));
    }
  }
  next();
});

// 使用 vue-router 4+ (Vue 3) 或自定义方案
// 跳转时携带状态
this.$router.push({
  name: 'List',
  state: {
    list: this.list,
    page: this.page,
    searchQuery: this.searchQuery
  }
});

// 在目标组件中读取
created() {
  const { state } = this.$route;
  if (state) {
    Object.assign(this.$data, state);
  }
}

// 模拟 state 传递
this.$router.push({
  name: 'List',
  query: {
    restore: 'true',
    page: this.page,
    q: this.searchQuery
  }
});

// 接收
created() {
  const { restore, page, q } = this.$route.query;
  if (restore) {
    this.page = Number(page);
    this.searchQuery = q;
    // 触发数据加载
  }
}

<!-- Parent.vue -->
<template>
  <div class="container">
    <!-- 所有子页面作为全屏组件渲染 -->
    <ListComponent v-if="currentView === 'list'" />
    <DetailComponent v-if="currentView === 'detail'" />
    <EditComponent v-if="currentView === 'edit'" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentView: 'list'
    };
  },
  provide() {
    return {
      switchTo: (view) => {
        this.currentView = view;
      }
    };
  }
};
</script>

<!-- App.vue -->
<template>
  <div id="app">
    <!-- 缓存需要 keepAlive 的路由 -->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <!-- 不需要缓存的路由 -->
    <router-view v-if="!$route.meta.keepAlive" />
  </div>
</template>

// router.js
const routes = [
  {
    path: '/list',
    name: 'List',
    component: () => import('@/views/List.vue'),
    meta: {
      keepAlive: true // 标记需要缓存
    }
  },
  {
    path: '/detail/:id',
    name: 'Detail',
    component: () => import('@/views/Detail.vue')
    // 默认不缓存
  }
];

// List.vue
export default {
  data() {
    return {
      list: [],
      page: 1,
      searchQuery: ''
    };
  },
  activated() {
    console.log('List 组件被激活');
    // 可在此处执行刷新逻辑（如果需要）
  },
  deactivated() {
    console.log('List 组件被缓存');
    // 组件状态自动保留
  }
}

<keep-alive include="List,Search">
  <router-view />
</keep-alive>

<keep-alive :max="5">
  <router-view />
</keep-alive>

// store/modules/list.js
const state = {
  listStates: {} // key: route fullPath, value: state
};

const mutations = {
  SAVE_LIST_STATE(state, { key, data }) {
    state.listStates[key] = data;
  },
  CLEAR_LIST_STATE(state, key) {
    delete state.listStates[key];
  }
};

// 组件中
computed: {
  ...mapState(['listStates']),
  currentStateKey() {
    return this.$route.fullPath;
  }
},
created() {
  const saved = this.listStates[this.currentStateKey];
  if (saved) Object.assign(this.$data, saved);
},
beforeDestroy() {
  this.$store.commit('SAVE_LIST_STATE', {
    key: this.currentStateKey,
    data: pick(this.$data, ['list', 'page', 'searchQuery'])
  });
}