动态路由匹配多个参数需在路径中用多个:paramName声明，如/product/:category/:brand/:id，组件中通过$route.params或useRoute()获取，编程式导航推荐使用命名路由加params对象传递。
动态路由匹配多个参数，关键在于路径定义时用多个带冒号的占位符，并在组件中通过 $route.params 或组合式 API 的 useRoute() 正确读取。
路径定义：用多个 :paramName 声明动态段
在 Vue Router 配置中，一个路径可以包含多个命名的动态片段。例如商品详情页常需区分分类、品牌、ID：
- /product/:category/:brand/:id —— 三个参数按顺序依次匹配 URL 中对应位置的值
- 访问 /product/electronics/apple/12345 时，params 就是 { category: 'electronics', brand: 'apple', id: '12345' }
- 参数名（如 category）必须唯一且不能重复，顺序不能颠倒
组件内获取参数：选项式与组合式写法都支持
在目标组件（如 ProductDetail.vue）中，不依赖 props，而是从路由对象提取：
- 选项式 API：直接使用 this.$route.params.id、this.$route.params.category 等
-
组合式 API（推荐）：
import { useRoute } from 'vue-router'<br>const route = useRoute()<br>console.log(route.params.id) // '12345'<br>console.log(route.params.brand) // 'apple' - 注意：params 是响应式对象，但仅当整个路由对象变化时才触发更新；若只改 query（如 ?ref=abc），params 不变
跳转时传参：编程式导航更可控
避免拼接字符串跳转，用 router.push() 对象语法确保参数安全传递：
-
命名路由 + params（推荐）：
router.push({<br> name: 'ProductDetail',<br> params: { category: 'electronics', brand: 'apple', id: 12345 }<br>}) - 若未配置 name，可用 path + params（需确保路径格式严格一致）
- 不建议用字符串路径如 '/product/' + cat + '/' + brand + '/' + id，易出错且无法做类型检查
进阶技巧：可选参数、正则约束与 404 处理
让多参数路由更健壮：
- 可选参数：在参数后加 ?，如 /:id/:tab?，匹配 /123 或 /123/description
- 正则限制：用括号加正则，如 /:id(\d+) 强制 id 必须为数字，否则跳 404
- 通配 404：在路由最后加一个 { path: '/:pathMatch(.*)*', name: 'NotFound' } 捕获所有未匹配路径
