使用vue-router时是否支持配置含多个id参数的动态路由路径？

完全支持，你写的这种在路径不同分段配置多个动态参数的写法，是vue-router动态路由匹配的原生标准用法，没有参数个数限制，可以直接正常使用。

你贴的配置本身没有任何问题：

// router/index.js
const routes = [
  {
    path: '/books/:bookId/authors/:authorId',
    name: 'Author',
    props: true,
    component: () => import('@/views/AuthorView.vue')
  }
]

使用效果 #

当访问地址为/books/32/authors/17时：

• 路由会自动匹配到你定义的Author路由，解析出的参数为{ bookId: '32', authorId: '17' }，可以在组件内通过$route.params直接读取
• 因为你开了props: true，这两个参数会自动作为props传入AuthorView.vue，组件里只要声明props: ['bookId', 'authorId']就能直接拿到值，不用额外耦合路由实例，写面包屑逻辑会非常顺畅
• 所有参数都明文放在URL路径里，用户复制链接分享给其他人，打开后能拿到完全一致的参数状态，不会出现分享后参数丢失的问题

踩坑提醒 #

做路由跳转的时候，如果要传这两个参数，一定要用路由名name配合params传，不要直接写path再带params，后者不会生效，会丢参数：

// 正确跳转写法
import { useRouter } from 'vue-router'
const router = useRouter()
router.push({
  name: 'Author',
  params: {
    bookId: 32,
    authorId: 17
  }
})

// 错误写法，params会被忽略
router.push({
  path: '/books/authors',
  params: { bookId: 32, authorId: 17 }
})

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