Nuxt.js中scrollBehavior异常：返回按钮时savedPosition因API未完成失效求助

这个问题我之前也碰到过——路由返回时数据请求还没完成，导致scrollBehavior里的savedPosition没按预期生效，总是乱滚动，确实挺头疼的。我来一步步给你拆解解决方案：

1. 能不能在scrollBehavior里获取store、调用commit？ #

当然可以！scrollBehavior函数完全能访问到Vue的核心实例，不管你用Vue 2还是Vue 3，有两种方式拿到store：

• 直接导入全局导出的store实例
• 通过router的app属性获取（Vue Router会把app实例挂载到router对象上）

你不仅能读取store状态，调用commit或者dispatch也没问题，不过一般在scrollBehavior里我们更多是读取状态来判断时机，而非直接修改状态（除非是临时的滚动相关标记）。

2. 怎么判断API请求何时完成？ #

核心思路是用一个状态标记数据是否加载完成：

• 在Vuex store里加一个类似isDataLoaded的状态
• 页面API请求开始时，把这个状态设为false
• 请求成功/失败后，把状态设为true

然后在scrollBehavior里，根据这个状态决定是直接返回savedPosition，还是等待数据加载完成后再滚动。

3. 具体代码实现 #

第一步：在Vuex Store里添加状态和操作 #

以Vue 2为例（Vue 3写法类似）：

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    isDataLoaded: false, // 标记数据是否加载完成
    // 你的其他业务状态...
  },
  mutations: {
    SET_DATA_LOADED(state, status) {
      state.isDataLoaded = status
    },
    // 你的其他mutations...
  },
  actions: {
    // 示例数据请求action
    async fetchPageData({ commit }) {
      commit('SET_DATA_LOADED', false) // 请求开始时标记未加载
      try {
        const res = await fetch('你的API接口地址')
        const data = await res.json()
        // 处理返回的数据...
        commit('SET_DATA_LOADED', true) // 请求完成后标记已加载
      } catch (err) {
        console.error('数据请求失败:', err)
        commit('SET_DATA_LOADED', true) // 失败也标记，避免一直等待
      }
    }
  }
})

第二步：在页面组件触发数据请求 #

在页面的生命周期钩子（或Nuxt的asyncData/fetch）里调用数据请求action：

// views/TargetPage.vue
export default {
  created() {
    this.$store.dispatch('fetchPageData')
  },
  // 如果是Nuxt项目，也可以用：
  // async fetch({ store }) {
  //   await store.dispatch('fetchPageData')
  // }
}

第三步：修改scrollBehavior函数 #

分Vue 2和Vue 3两种场景处理：

Vue 2 + Vue Router 3版本

用Promise等待数据加载完成：

// app/router.scrollBehavior.js
import store from '@/store' // 导入你的store实例

export default function(to, from, savedPosition) {
  // 如果是浏览器返回操作且有保存的位置
  if (savedPosition) {
    return new Promise((resolve) => {
      // 监听store里的加载状态
      const unwatch = store.watch(
        (state) => state.isDataLoaded,
        (isLoaded) => {
          if (isLoaded) {
            unwatch() // 取消监听
            resolve(savedPosition)
          }
        }
      )
      // 加超时兜底，避免无限等待
      setTimeout(() => {
        unwatch()
        resolve(savedPosition)
      }, 2000)
    })
  } else {
    return { x: 0, y: 0 }
  }
}

Vue 3 + Vue Router 4版本

Vue Router 4的scrollBehavior支持直接返回Promise，写法更简洁：

// app/router.scrollBehavior.js
import store from '@/store'

export default async function(to, from, savedPosition) {
  if (savedPosition) {
    // 等待数据加载完成
    while (!store.state.isDataLoaded) {
      // 用微任务等待状态更新
      await new Promise(resolve => requestAnimationFrame(resolve))
    }
    return savedPosition
  } else {
    return { top: 0 }
  }
}

额外优化建议 #

• 如果有多页面需要区分状态，可以把isDataLoaded改成对象，比如dataLoadingStatus: { pageA: false, pageB: false }，针对不同页面单独判断。
• 可以在路由的meta里标记需要等待数据的页面，比如meta: { waitForData: true }，然后在scrollBehavior里判断to.meta.waitForData再决定是否等待。

这样处理后，点击浏览器返回按钮时，scrollBehavior会等待API请求完成后再应用保存的滚动位置，就不会出现乱滚动的问题了。

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