Vue 页面返回不刷新：3 种实战方案彻底解决

在 Vue 项目中，页面返回时不想让页面刷新（即保留页面的状态、数据、滚动位置等），本质是阻止组件的重新渲染或数据的重新初始化，核心思路是根据 Vue 的路由模式（hash/history）和组件的生命周期，结合缓存、状态管理等方式实现。以下是几种常用且有效的方案，按场景优先级排序：

一、核心方案：使用 Vue 的<keep-alive>缓存组件（推荐）

<keep-alive>是 Vue 内置的抽象组件，用于缓存包裹的组件实例，避免组件被频繁创建和销毁，从而保留组件的状态（数据、DOM、滚动位置等）。这是处理页面返回不刷新最常用的方式。

1. 基础用法：缓存所有路由组件

在路由出口（<router-view>）外层包裹<keep-alive>，这样所有匹配的路由组件都会被缓存：

<!-- App.vue -->
<template>
  <div id="app">
    <!-- keep-alive 缓存路由组件 -->
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>
</template>

特点：所有路由组件都会被缓存，返回时不会重新执行created、mounted等生命周期钩子，仅会触发activated（组件激活）和deactivated（组件失活）钩子。

2. 进阶用法：按需缓存指定组件

如果只需要缓存部分组件，可通过<keep-alive>的include/exclude属性（匹配组件的name）实现：

<!-- App.vue -->
<template>
  <div id="app">
    <!-- 只缓存 name 为 PageA、PageB 的组件 -->
    <keep-alive include="PageA,PageB">
      <router-view />
    </keep-alive>
  </div>
</template>

注意：这里的PageA/PageB是组件的name属性（不是路由的name），必须在组件内定义：

<!-- PageA.vue -->
<script>
export default {
  name: 'PageA', // 必须与keep-alive的include匹配
  data() {
    return {
      list: [], // 需保留的数据
      scrollTop: 0 // 需保留的滚动位置
    }
  }
}
</script>

3. 结合路由元信息（meta）动态缓存

如果需要根据路由规则动态决定是否缓存，可在路由配置中添加meta字段，再结合<keep-alive>的条件渲染：

// router/index.js（路由配置）
import Vue from 'vue'
import Router from 'vue-router'
import PageA from '@/views/PageA'
import PageB from '@/views/PageB'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/pageA',
      name: 'PageA',
      component: PageA,
      meta: { keepAlive: true } // 需要缓存
    },
    {
      path: '/pageB',
      name: 'PageB',
      component: PageB,
      meta: { keepAlive: false } // 不需要缓存
    }
  ]
})

然后在App.vue中根据meta.keepAlive动态判断：

<!-- App.vue -->
<template>
  <div id="app">
    <keep-alive>
      <!-- 缓存带有 keepAlive: true 的路由组件 -->
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <!-- 不缓存的组件直接渲染 -->
    <router-view v-if="!$route.meta.keepAlive" />
  </div>
</template>

4. 保留滚动位置（配合<keep-alive>）

如果页面有滚动条，返回时需要保留滚动位置，可结合activated钩子和 DOM 操作实现：

<!-- PageA.vue -->
<template>
  <div class="page-a" ref="pageContainer">
    <!-- 长列表内容 -->
  </div>
</template>

<script>
export default {
  name: 'PageA',
  data() {
    return {
      scrollTop: 0 // 存储滚动位置
    }
  },
  // 组件失活时（离开页面），记录滚动位置
  deactivated() {
    this.scrollTop = this.$refs.pageContainer.scrollTop
  },
  // 组件激活时（返回页面），恢复滚动位置
  activated() {
    this.$refs.pageContainer.scrollTop = this.scrollTop
  }
}
</script>

二、补充方案：使用 Vuex/Pinia 存储状态

如果不想使用<keep-alive>（比如组件需要重新渲染，但数据需要保留），可以将页面的核心数据存储到Vuex（Vue2） 或Pinia（Vue3） 中，页面返回时从状态管理中读取数据，而非重新请求 / 初始化。

示例（Vue2 + Vuex）：

1. 定义 Vuex 模块：

// store/modules/pageA.js
const state = {
  listData: [], // 页面A的核心数据
  filterParams: {} // 页面A的筛选参数
}

const mutations = {
  SET_LIST_DATA(state, data) {
    state.listData = data
  },
  SET_FILTER_PARAMS(state, params) {
    state.filterParams = params
  }
}

const actions = {
  // 模拟异步请求数据
  fetchListData({ commit }, params) {
    return new Promise((resolve) => {
      setTimeout(() => {
        const data = [/* 模拟数据 */]
        commit('SET_LIST_DATA', data)
        commit('SET_FILTER_PARAMS', params)
        resolve(data)
      }, 1000)
    })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

1. 在组件中使用：

<!-- PageA.vue -->
<template>
  <div class="page-a">
    <!-- 渲染listData -->
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: 'PageA',
  data() {
    return {
      // 临时数据（不需要保留的）
      tempData: ''
    }
  },
  computed: {
    ...mapState('pageA', ['listData', 'filterParams'])
  },
  mounted() {
    // 页面加载时，优先从Vuex读取数据，无数据则请求
    if (this.listData.length === 0) {
      this.fetchListData(this.filterParams)
    }
  }
}
</script>

三、特殊场景：history 模式下的浏览器返回（popstate）

在 Vue 的history路由模式下，浏览器的返回按钮会触发popstate事件，如果需要拦截该事件并控制页面行为（比如阻止默认刷新），可以在路由守卫或组件中监听popstate：

// 在App.vue的created钩子中监听
created() {
  window.addEventListener('popstate', this.handlePopState)
},
beforeDestroy() {
  // 销毁时移除监听，避免内存泄漏
  window.removeEventListener('popstate', this.handlePopState)
},
methods: {
  handlePopState(e) {
    // 阻止默认行为（部分浏览器生效，谨慎使用）
    e.preventDefault()
    // 自定义逻辑：比如保留数据、跳转指定路由等
    console.log('页面返回，不刷新')
  }
}

注意：popstate的默认行为是浏览器的历史记录导航，e.preventDefault()在部分浏览器中可能无效，因此该方式仅作为补充，不建议单独使用。

四、Vue3 注意事项

1. Vue3 中<keep-alive>的用法与 Vue2 基本一致，但如果使用<script setup>，组件的name需要通过defineOptions显式定义：

<!-- PageA.vue（Vue3 + script setup） -->
<script setup>
import { ref, onActivated, onDeactivated } from 'vue'
// 定义组件name，用于keep-alive的include
defineOptions({
  name: 'PageA'
})

const scrollTop = ref(0)
const pageContainer = ref(null)

// 组件激活
onActivated(() => {
  pageContainer.value.scrollTop = scrollTop.value
})

// 组件失活
onDeactivated(() => {
  scrollTop.value = pageContainer.value.scrollTop
})
</script>

1. Vue3 推荐使用 Pinia 替代 Vuex，状态管理的思路一致，只是 API 更简洁。

总结

方案	适用场景	优点	缺点
<keep-alive>	大多数场景（需保留组件状态 / DOM）	简单高效，原生支持，保留完整组件状态	缓存过多可能占用内存（可通过 include 控制）
Vuex/Pinia	组件需重新渲染，但数据需保留	数据与组件解耦，灵活控制	需要额外编写状态管理代码
popstate 监听	history 模式下拦截浏览器返回	可自定义返回行为	兼容性差，默认行为拦截不稳定

优先推荐使用<keep-alive>，配合路由元信息实现按需缓存，是 Vue 中处理页面返回不刷新的最优解。