嘿，当然可以实现返回上一页时传递参数！我来分享几种在Vue Router场景下常用的方案，你可以根据自己的业务需求来选：

方案1：利用浏览器History API的state参数 #

Vue Router的$router.go(-1)本质上是调用浏览器的history.back()，我们可以在跳转到当前页面时给历史记录附加state数据，返回上一页后就能拿到这些参数。

比如从页面A跳转到页面B时，这样写跳转逻辑：

// 页面A的跳转代码
this.$router.push({
  path: '/pageB',
  // 附加需要传递的state数据
  state: { fromA: { id: 123, status: 'completed' } }
})

在页面B执行返回操作后，页面A可以在mounted或activated钩子中读取state：

// 页面A的钩子函数
mounted() {
  const historyState = window.history.state
  if (historyState?.fromA) {
    console.log('从B页返回带来的数据：', historyState.fromA)
    // 建议处理完后清空state，避免再次进入时重复读取
    window.history.replaceState({}, document.title)
  }
}

注意：state存在浏览器历史栈中，刷新页面后仍保留，但如果用户直接打开页面A，state就不存在了，所以一定要做判空处理。

方案2：通过全局状态管理（Vuex/Pinia）传递参数 #

如果你的项目用了Vuex或者Pinia，这是最稳妥的方案，尤其适合传递复杂数据或跨多页面传递的场景。

以Pinia为例，步骤如下：

1. 定义一个专门存返回参数的store：

// stores/returnParams.js
import { defineStore } from 'pinia'

export const useReturnParamsStore = defineStore('returnParams', {
  state: () => ({
    tempData: null
  }),
  actions: {
    setTempData(data) {
      this.tempData = data
    },
    clearTempData() {
      this.tempData = null
    }
  }
})

2. 在页面B设置要传递的参数，再返回：

// 页面B的返回逻辑
import { useReturnParamsStore } from '@/stores/returnParams'

const returnStore = useReturnParamsStore()

const goBack = () => {
  // 设置要传递的参数
  returnStore.setTempData({ result: 'success', msg: '操作已完成' })
  this.$router.go(-1)
}

3. 在页面A读取参数并及时清空：

// 页面A的钩子函数
import { useReturnParamsStore } from '@/stores/returnParams'

const returnStore = useReturnParamsStore()

activated() {
  if (returnStore.tempData) {
    console.log('返回带来的参数：', returnStore.tempData)
    // 处理完后清空数据，避免下次进入时重复读取
    returnStore.clearTempData()
  }
}

这种方式不受浏览器历史栈或刷新的影响，参数存在内存中（需要持久化的话可以结合localStorage），稳定性拉满。

方案3：修改上一页的路由查询参数（适合简单场景） #

如果上一页的路由允许修改，你可以在返回前通过$router.replace修改上一页的query参数，再返回。不过这种方式会修改历史记录，建议只在简单场景下使用。

示例代码：

// 页面B的返回逻辑
const goBackWithQuery = () => {
  // 获取上一页的路由信息
  const prevRoute = this.$router.history.stack[this.$router.history.stack.length - 2]
  // 修改上一页的query参数
  this.$router.replace({
    path: prevRoute.path,
    query: { ...prevRoute.query, returnFlag: 'done' }
  })
  // 执行返回
  this.$router.go(-1)
}

然后在页面A监听query的变化：

// 页面A的逻辑
watch: {
  '$route.query.returnFlag'(newVal) {
    if (newVal) {
      console.log('返回带来的参数：', newVal)
      // 处理完后清空query，避免刷新后仍存在
      this.$router.replace({ query: { ...this.$route.query, returnFlag: undefined } })
    }
  }
}

这种方式只适合传递简单的字符串参数，复杂对象不建议用。

总结一下：优先推荐方案2（状态管理）处理大多数业务场景；如果不想依赖状态管理，方案1是不错的选择；方案3尽量少用，因为会修改历史记录。

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