Vue3嵌套路由如何传递动态路径段实现正确子路由跳转？

不需要手动拼接动态id，有两种低冗余的实现方案：

你原来的写法丢失参数的核心原因是：Vue Router 对字符串路径的解析遵循类文件系统规则，不带.//../前缀的非根路径（即不以/开头），会默认替换当前路径的最后一个片段——你当前在/group/1路径下，最后一个片段是动态id1，直接写to="homework_list"就会把1替换成homework_list，最终跳转到/group/homework_list。

只要给路径加上./前缀，显式声明这是当前路径下的子路径，Vue Router就会在当前完整路径（包含动态id）后拼接子路径，不需要修改任何路由配置，直接改router-link代码即可：

<!-- 跳转作业列表 -->
<router-link to="./homework_list">Homework List</router-link>
<!-- 跳转成员列表同理 -->
<router-link to="./member_list">Member List</router-link>

点击后会自动保留当前路由的id参数，直接跳转到/group/[当前id]/对应子路径。

如果后续路由路径可能调整，推荐给子路由配置唯一的name属性，用命名路由的方式跳转，同样不需要手动拼接id：

1. 先修改路由配置，给子路由补充name字段：

{
  path: '/group/:id',
  component: Group,
  children: [
    {
      path: 'homework_list',
      name: 'GroupHomework', // 自定义唯一路由名
      component: HomeworkList,
    },
    {
      path: 'member_list',
      name: 'GroupMember',
      component: GroupMemberList
    },
  ]
}

2. 把router-link的to属性绑定为路由对象：

<router-link :to="{ name: 'GroupHomework' }">Homework List</router-link>

这种写法下，只要当前处于/group/:id路径下，跳转时会自动继承当前路由的id参数。如果需要从其他非小组页面跳转到该路由，再手动传入params即可：

<router-link :to="{ name: 'GroupHomework', params: { id: groupId } }">Homework List</router-link>

手动拼接$route.params.id、硬编码id片段的写法都属于冗余实现，只要用对路径解析规则或者命名路由，完全不需要写这类重复代码。

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