Vue2状态留存疑问：返回页面时能否保留状态与滚动位置？

嘿，这个场景在日常Vue开发里真的太常见了！Vue2本身没有原生自动保留页面状态和滚动位置的功能，不过我们有几种简单可靠的方案来实现你要的效果，下面一步步说：

核心方案：用<keep-alive>缓存组件 #

<keep-alive>是Vue内置的组件，专门用来缓存组件实例，避免组件被销毁重建，这样页面的状态（包括搜索结果、滚动位置、表单输入等）都会被保留下来。

1. 配置路由和<keep-alive> #

首先在你的根组件（比如App.vue）里，用<keep-alive>包裹需要缓存的路由视图：

<template>
  <div id="app">
    <!-- 缓存需要保留状态的页面 -->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <!-- 不缓存的页面直接渲染 -->
    <router-view v-if="!$route.meta.keepAlive" />
  </div>
</template>

然后在路由配置文件里，给页面A添加meta标记，告诉Vue它需要被缓存：

const routes = [
  {
    path: '/pageA',
    name: 'PageA',
    component: () => import('./views/PageA.vue'),
    meta: { keepAlive: true } // 标记该页面需要缓存
  },
  {
    path: '/pageB',
    name: 'PageB',
    component: () => import('./views/PageB.vue')
  }
]

2. 处理滚动位置 #

<keep-alive>会缓存组件的DOM结构，但滚动位置属于浏览器窗口的状态，需要我们手动保存和恢复。在页面A的组件里添加路由钩子：

export default {
  data() {
    return {
      searchKeyword: '',
      searchResults: []
    }
  },
  activated() {
    // 组件被激活（返回页面时），恢复滚动位置
    const savedScrollTop = sessionStorage.getItem('pageAScrollTop')
    if (savedScrollTop) {
      window.scrollTo(0, parseInt(savedScrollTop))
    }
  },
  beforeRouteLeave(to, from, next) {
    // 离开页面时，保存当前滚动位置到sessionStorage
    sessionStorage.setItem('pageAScrollTop', window.scrollY)
    next()
  },
  methods: {
    async handleSearch() {
      // 你的搜索逻辑，结果存在组件data里，缓存后不会丢失
      this.searchResults = await yourSearchApi(this.searchKeyword)
    }
  }
}

备选方案：用状态管理或本地存储 #

如果你不想缓存整个组件，也可以单独保存关键状态：

• 状态管理（Vuex）：把搜索关键词、结果列表存在Vuex的全局状态里，页面A挂载时先从Vuex读取数据，有数据就直接渲染，没有再发起搜索。
• 本地存储（sessionStorage/localStorage）：搜索成功后把结果和关键词存在sessionStorage，页面A挂载时读取并赋值。这种方式适合不需要全局共享的状态，但要注意数据序列化的问题（比如对象要转成JSON字符串）。

注意事项 #

• 用<keep-alive>时，组件的生命周期钩子会变成activated（激活时）和deactivated（失活时），原来的mounted只会在第一次挂载时触发，后续返回不会再执行。
• 如果页面A的搜索结果需要根据路由参数变化，记得在activated钩子里判断参数是否变化，重新发起搜索。

内容的提问来源于stack exchange，提问作者dsky