Vue命名路由router-link跳转报错缺少必填id参数原因咨询

报错原因分析 #

你的命名路由写法本身语法完全符合规范，出现Missing required param "id"报错，本质是路由参数校验时机和异步数据加载时机不匹配导致的：

• 页面渲染时，client大概率是你通过异步请求从后端获取的数据，初始状态下client是空对象（比如data中初始定义为client: {}），首次渲染router-link时client.id的值为undefined
• 命名路由的参数校验是在生成路由对象时立即执行的：只要传入params的id为undefined，Vue Router会立刻触发必填参数校验失败，抛出你遇到的错误，哪怕后续异步数据加载完成client.id更新为有效值，也会因为首次渲染的报错阻断后续流程
• 路径拼接的写法没有实时参数校验逻辑：首次渲染哪怕拼接出/dashboard/clients/undefined/edit这类非法路径，也不会抛出错误，只会生成暂时无效的跳转链接，等异步请求完成client.id更新为有效值后，路径会响应式更新为正确值，自然就能正常跳转

命名路由写法修复方案 #

如果你要继续使用更易维护的命名路由写法，只要避免初始渲染时client.id为undefined即可，可选方案：

1. 等client数据加载完成后再渲染router-link：

<router-link 
  v-if="client.id"
  :to="{ name: 'EditClient', params: { id: client.id }}" 
  class="button is-light mt-4"
>
  Edit
</router-link>

2. 给id参数设置兜底值，避免传undefined：

<router-link 
  :to="{ name: 'EditClient', params: { id: client.id || 0 }}" 
  class="button is-light mt-4"
>
  Edit
</router-link>

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