Vue3如何获取选中树节点ID并作为路由参数传递

你现有代码存在两个前置问题需要先修复，再完成路由传参：

1. toggleSelect方法有逻辑缺陷：选中时会重复添加已存在的节点ID，取消勾选时如果找不到对应ID会误删数组最后一位
2. 路由params默认只支持字符串类型传值，直接传入数组会被序列化为无效值，且如果路由path未定义对应参数，刷新页面后参数会直接丢失

第一步：修复节点选择逻辑 #

替换原有toggleSelect方法，增加边界判断：

const toggleSelect = (node, isSelected) => {
  const nodeIdIndex = selected.value.indexOf(node.some_id)
  if (isSelected) {
    // 节点未被选中时才加入数组，避免重复存储
    if (nodeIdIndex === -1) selected.value.push(node.some_id)
  } else {
    // 找到对应节点索引时才执行删除，避免误删其他值
    if (nodeIdIndex > -1) selected.value.splice(nodeIdIndex, 1)
  }
  // 递归联动子节点选中状态
  if (node.children?.length) {
    node.children.forEach(child => toggleSelect(child, isSelected))
  }
}

同时修正按钮的传参逻辑：如果你用的是Vue3组合式API，selected是ref对象，需要传入实际值：

<button class="btn" @click="editState(selected.value)">
  ایجاد ساختمان
  <br>
  Selected: {{selected}}
</button>

如果是Vue2选项式API，selected定义在data中，直接传selected即可。

第二步：实现路由传参 #

根据你的业务场景二选一即可：

方案1：query传参（推荐，支持直接传数组，无额外路由配置） #

修改editState方法，增加空值判断，用query传递选中ID数组：

editState(selectedIds) {
  if (!selectedIds?.length) {
    alert('请先选择树节点')
    return
  }
  this.$router.push({
    name: 'RealStateForm',
    query: { ids: selectedIds }
  })
}

在RealStateForm页面直接获取参数即可：

// Vue2 选项式API
const selectedIds = this.$route.query.ids

// Vue3 组合式API
import { useRoute } from 'vue-router'
const route = useRoute()
const selectedIds = route.query.ids

方案2：params传参（适合路由已配置id路径参数的场景） #

如果你的路由规则已经给RealStateForm配置了/xxx/:id格式的路径，需要先把数组转为字符串再传递：

editState(selectedIds) {
  if (!selectedIds?.length) {
    alert('请先选择树节点')
    return
  }
  this.$router.push({
    name: 'RealStateForm',
    params: { id: selectedIds.join(',') }
  })
}

在目标页面拿到参数后转回数组即可：

// 例：拿到的id是"1,3,5"，split后得到[1,3,5]
const selectedIds = this.$route.params.id.split(',').map(Number) 
// 如果ID是字符串类型可以省略.map(Number)

注意：如果路由path中没有定义:id参数，不要用params传复杂类型，刷新页面后参数会丢失，这种场景优先用query传参。

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