Vue.js列表页返回位置恢复的三种解决方案

在实际开发中，我们常常遇到这样的体验问题：用户在一个长列表页中向下滚动浏览，点击某项进入详情页查看后，返回列表页时滚动位置重置到顶部，导致需要重新寻找之前浏览的位置。这增加了不必要的操作，违背了用户的自然预期。

理想的用户体验是：从详情页返回后，列表页应保持在用户离开时的滚动位置。

针对这一问题，以下是三种常见的解决方案：

1. 使用Keep-Alive缓存组件

此方案的核心是利用Vue的组件包裹，使列表页组件在离开时不被销毁，从而保留其状态（包括滚动位置）。

实现步骤：

1. 在根组件（如App.vue）中，使用``的include属性（或exclude）配合路由元信息meta.keepAlive，有条件地缓存组件。

   vue

   export default {
     computed: {
       // 获取需要缓存的组件名列表（假设你在路由里定义了组件name）
       cachedViews() {
         return this.$store.state.cachedViews; // 或根据路由meta自行计算
       }
     }
   }

2. 在路由配置中，为需要缓存的列表页路由添加元信息标记。

   javascript

   // router.js
   const routes = [
     {
       path: '/list',
       name: 'List', // 组件名对于include匹配很重要
       component: () => import('./views/List.vue'),
       meta: {
         keepAlive: true // 需要被缓存
       }
     },
     {
       path: '/detail/:id',
       name: 'Detail',
       component: () => import('./views/Detail.vue'),
       meta: {
         keepAlive: false // 不需要缓存
       }
     }
   ];

注意： 此方案需要列表页组件被包裹在``中，并且需要注意管理缓存，避免内存占用过多。组件内可以使用activated和deactivated生命周期钩子。

2. 使用路由守卫

此方案的原理是在离开列表页时，通过路由守卫beforeRouteLeave记录当前的滚动位置；在再次进入列表页时，通过beforeRouteEnter将页面滚动到之前记录的位置。

实现步骤：

在列表页组件中，添加路由守卫。

// List.vue
export default {
  name: 'List',
  data() {
    return {
      scrollTop: 0
    };
  },
  // 组件内守卫 - 离开时记录位置
  beforeRouteLeave(to, from, next) {
    // 记录滚动位置，可以存储在组件data、Vuex或本地存储中
    this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    // 如果使用Vuex: this.$store.commit('saveScrollTop', scrollTop);
    // 如果使用本地存储: localStorage.setItem('listScrollTop', scrollTop);
    next();
  },
  // 组件内守卫 - 进入时恢复位置 (此时组件实例还未创建，需要通过vm访问)
  beforeRouteEnter(to, from, next) {
    next(vm => {
      // 在next的回调中获取组件实例，恢复滚动位置
      // 从组件data恢复
      if (vm.scrollTop > 0) {
        document.body.scrollTop = vm.scrollTop;
        document.documentElement.scrollTop = vm.scrollTop;
      }
      // 如果从Vuex恢复: const top = vm.$store.state.scrollTop;
      // 如果从本地存储恢复: const top = localStorage.getItem('listScrollTop');
    });
  }
};

注意： 此方案逻辑清晰，但需要在每个需要保存位置的页面组件中单独实现，稍显繁琐。确保滚动位置的存储（如组件data）能在组件重新创建时被正确读取。

3. 使用Vue Router的scrollBehavior方法（推荐）

这是最简洁、最官方的解决方案。Vue Router提供了scrollBehavior配置选项，允许你定义路由切换时的滚动行为。当用户使用浏览器的前进/后退按钮时，savedPosition参数会自动提供之前记录的滚动坐标。

实现步骤：

在创建Vue Router实例时，定义scrollBehavior函数。

// router.js
import { createRouter, createWebHistory } from 'vue-router'; // Vue 3
// 或 import VueRouter from 'vue-router'; // Vue 2

const router = createRouter({
  history: createWebHistory(),
  routes: [...], // 你的路由配置
  // 滚动行为控制
  scrollBehavior(to, from, savedPosition) {
    // savedPosition 仅当通过浏览器前进/后退按钮触发popstate导航时才可用
    if (savedPosition) {
      // 如果有保存的位置，则滚动到该位置
      return savedPosition;
    } else {
      // 否则，滚动到页面顶部。也可以返回一个锚点选择器，如 { selector: '#app' }
      return { top: 0, left: 0 };
    }
    // 注意：返回的对象也可以是 { selector: '#id', offset: { x, y } } 形式
  }
});

export default router;

优点： 此方案是全局配置，无需修改每个页面组件。它直接利用了浏览器的历史记录API和Vue Router的内部机制，行为最接近原生应用体验。仅在用户进行“后退/前进”操作时恢复位置，符合直觉。

总结

对于大多数追求流畅导航体验的项目，推荐优先使用第3种（scrollBehavior）方案。它配置简单，且能优雅地处理浏览器前进/后退的滚动位置恢复，是Vue Router为解决此类问题提供的标准答案。

本文灵感来源于 https://www.jianshu.com/p/a0a71d14fc53，内容已进行重新整理、扩展与优化。