Vue3路由传参报错：缺少必填参数c_id，求技术解惑

以下是可能的原因和对应的排查/解决方法：

• 先确认item.id是否有效
  报错的核心是路由要求的c_id参数未正确传递，第一步要排查循环中的item.id是否真的有值。可以临时在按钮点击事件里加调试代码：

  <el-button type="success" @click="console.log(item.id); $router.push({name:'cat.edit',params:{c_id:item.id}})">
    <icon-editor/>&nbsp;Modify
  </el-button>
  

  打开控制台查看输出，如果item.id是undefined或空值，说明你的cats列表数据里没有id字段，或者字段名不符（比如接口返回的是_id），这会直接导致params里的c_id缺失。

• 调整路由跳转的写法
  如果用name+params的方式跳转仍有问题，可以尝试直接用路径拼接的方式跳转（注意路径要和路由的完整路径对应，比如该路由嵌套在/cat下，就要写完整路径）：

  <el-button type="success" @click="$router.push(`/cat/edit/${item.id}`)">
    <icon-editor/>&nbsp;Modify
  </el-button>
  

  这种写法绕过了name匹配的参数校验逻辑，直接生成符合要求的路由路径，能快速验证参数是否能正常传递。

• 排查路由嵌套层级问题
  检查edit/:c_id路由是否嵌套在父路由下，如果父路由本身也是动态路由（比如/cat/:parent_id），那么跳转时除了传递c_id，还需要传递父路由的参数，否则也会触发参数缺失报错。不过你之前用不带参数的edit路由正常，这种可能性较低，但可以核对下路由配置的完整结构。

• 为什么改用query就正常？
  query参数是URL中的查询字符串（如/edit?c_id=123），属于可选参数，Vue Router不会强制校验其是否存在；而动态路由的params（如/edit/123）是路由路径的组成部分，属于必填项，路由会严格校验参数是否存在，所以参数未正确传递时就会报错。

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