Vue2点击编辑按钮跳转前传递beneficiary_id及解决路由报错

你遇到的route('beneficiary_form') not found错误，是因为route()是Laravel后端的路由生成函数，前端Vue环境里没有这个全局方法，自然调用失败。Vue2里页面跳转得用vue-router提供的$router.push方法，结合你的需求，完整实现方案如下：

1. 确保Vuex状态管理能正确存储ID #

先确认你的Vuex模块（比如命名为beneficiary）里的mutation和action逻辑正常，示例代码参考：

// store/modules/beneficiary.js
const state = {
  currentBeneficiaryId: null
}

const mutations = {
  SET_BENEFICIARY_ID(state, id) {
    state.currentBeneficiaryId = id
  }
}

const actions = {
  add({ commit }, payload) {
    commit('SET_BENEFICIARY_ID', payload.beneficiary_id)
  }
}

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

记得在store/index.js里注册该模块。

2. 列表页的跳转实现 #

模板部分（绑定点击事件） #

<a @click="handleEdit(item.id)">编辑</a>

这里的item.id就是你要传递的beneficiary_id。

脚本部分（handleEdit方法逻辑） #

export default {
  methods: {
    async handleEdit(id) {
      // 第一步：调用Vuex的add方法存储ID
      await this.$store.dispatch('beneficiary/add', { beneficiary_id: id })
      // 第二步：用vue-router跳转，支持按路由name或path跳转
      this.$router.push({ name: 'beneficiary_form' })
      // 若用路径跳转，示例：this.$router.push('/beneficiary/form')
    }
  }
}

用await是确保ID已经存入Vuex后再跳转，避免目标页面拿不到数据的情况。

3. 目标页获取存储的ID #

在beneficiary_form页面，直接从Vuex中读取存储的ID即可：

export default {
  mounted() {
    const beneficiaryId = this.$store.state.beneficiary.currentBeneficiaryId
    // 后续用该ID发起更新请求或执行其他业务逻辑
  }
}

额外补充：如果你不想依赖Vuex，也可以直接通过路由传参跳转，示例：

this.$router.push({ 
  name: 'beneficiary_form',
  params: { beneficiary_id: id }
})

之后在目标页用this.$route.params.beneficiary_id获取ID即可，但既然你已经采用Vuex方案，按原有思路推进即可。

内容的提问来源于stack exchange，提问作者B L Praveen