Vue 3路由返回列表页滚动位置异常，如何预加载数据恢复位置？

一、预加载数据（渲染前获取API数据） #

你可以通过Vue Router的路由守卫在组件渲染前完成数据请求，避免返回时页面空白的问题。对于选项式API，使用beforeRouteEnter守卫：

export default {
  data() {
    return {
      elements: [], // 列表数据应为数组，修正原代码的对象类型
      params: {}
    }
  },
  // 进入路由前触发，此时组件实例尚未创建
  beforeRouteEnter(to, from, next) {
    axios.get('/elements')
      .then(response => {
        // 通过next的回调将请求到的数据注入组件实例
        next(vm => {
          vm.elements = response.data.elements;
          vm.params = to.params;
        });
      })
      .catch(err => {
        console.error(err);
        next();
      });
  },
  // 处理路由参数变化场景（如分页切换），重新请求数据
  beforeRouteUpdate(to, from, next) {
    this.params = to.params;
    axios.get('/elements', { params: this.params })
      .then(response => {
        this.elements = response.data.elements;
        next();
      })
      .catch(err => {
        console.error(err);
        next();
      });
  }
}

beforeRouteEnter在组件实例创建前执行，请求完成后再渲染组件，返回列表页时页面会直接渲染已有数据，不会出现空白状态。

二、恢复滚动位置 #

仅预加载数据还不够，需要配合Vue Router的scrollBehavior配置保存和恢复滚动位置：

在路由配置文件（如router/index.js）中添加：

const router = createRouter({
  history: createWebHistory(),
  routes: [...],
  scrollBehavior(to, from, savedPosition) {
    // 从详情页返回列表页时，恢复之前保存的滚动位置
    if (savedPosition && from.name === '详情页路由名称' && to.name === '列表页路由名称') {
      // 延迟滚动确保DOM渲染完成，可根据实际情况调整延迟时间
      return new Promise(resolve => {
        setTimeout(() => {
          resolve(savedPosition);
        }, 100);
      });
    }
    // 其他场景默认滚动到顶部
    return { top: 0 };
  }
});

三、额外优化：缓存组件 #

如果列表数据不频繁更新，可使用<keep-alive>缓存组件，避免每次返回都重新请求数据，同时保留组件原有状态（包括滚动位置）：

在路由出口处包裹组件：

<router-view v-slot="{ Component }">
  <keep-alive>
    <component :is="Component" v-if="$route.meta.keepAlive" />
  </keep-alive>
  <component :is="Component" v-else />
</router-view>

在列表页的路由配置中添加meta标记：

{
  path: '/elements',
  name: 'ElementsList',
  component: ElementsList,
  meta: { keepAlive: true }
}

这种方式下组件会被缓存，返回时直接显示之前的状态，无需重新请求数据和处理滚动位置，体验更流畅。

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