在 Vue Router 中“传递多个参数”通常分为两种情况路径参数Params和查询参数Query。它们的展示方式和获取方式完全不同。场景一路径参数Params—— URL 中的必填段适用于必须携带的信息比如/user/123/post/456用户ID和文章ID。1. 路由配置定义多个占位符constroutes[{path:/user/:userId/post/:postId,// 定义两个参数name:PostDetail,component:PostDetail}]2. 如何传递跳转时// 方式 A: 使用 name paramsrouter.push({name:PostDetail,params:{userId:123,postId:456}})// 方式 B: 直接拼接路径router.push(/user/123/post/456)3. 页面中如何展示获取数据推荐写法使用props解耦最优雅在路由配置中开启props: true参数会自动变为组件的props。// router/index.jsconstroutes[{path:/user/:userId/post/:postId,component:PostDetail,props:true}]// PostDetail.vuescript setup// 直接通过 props 接收无需操作 route 对象constpropsdefineProps([userId,postId])// 直接拿去展示或请求接口console.log(props.userId,props.postId)/scripttemplatedivh1用户ID{{userId}}/h1h2文章ID{{postId}}/h2/div/template传统写法使用useRoute如果不想用props可以在组件内通过$route.params获取。script setup import { useRoute } from vue-router const route useRoute() // 展示时直接使用 route.params.userId 和 route.params.postId /script template p参数对象{{ route.params }}/p !-- 输出 { userId: 123, postId: 456 } -- /template场景二查询参数Query—— URL 中的可选键值对适用于筛选、分页、搜索关键词等可选信息比如/search?keywordvuepage1sortasc。1. 路由配置无需占位符constroutes[{path:/search,component:SearchResult}// 不需要 :param]2. 如何传递跳转时// 使用 query 字段router.push({path:/search,query:{keyword:vue,page:1,sort:asc}})// 最终 URL 变为 /search?keywordvuepage1sortasc3. 页面中如何展示获取数据通过route.query获取一个包含所有参数的对象。script setup import { useRoute } from vue-router const route useRoute() // 直接展示 const searchKeyword route.query.keyword const currentPage route.query.page /script template div p当前搜索词{{ route.query.keyword || 无 }}/p p当前页码{{ route.query.page }}/p p排序方式{{ route.query.sort }}/p !-- 直接打印整个对象方便调试 -- pre完整参数{{ route.query }}/pre /div /template场景三混合使用路径参数 查询参数实际业务中经常混用例如查看某用户某文章的第 N 页评论。URL/user/123/post/456?page2size10script setup import { useRoute } from vue-router const route useRoute() // 路径参数必填 const userId route.params.userId const postId route.params.postId // 查询参数选填 const page route.query.page || 1 const size route.query.size || 10 /script template h3用户 {{ userId }} 的文章 {{ postId }}/h3 p当前查看第 {{ page }} 页每页 {{ size }} 条/p /template4. 关键注意点避免展示错乱场景注意事项解决方案相同组件参数变化从/user/1/post/2跳转到/user/3/post/4时组件实例会被复用created或setup不会重新执行页面数据可能不刷新。必须监听路由变化watch(() route.params, (newParams) { /* 重新请求数据 */ }, { deep: true })刷新页面丢失数据刷新页面时路径参数Params依然在 URL 中可以正常获取但如果是通过push传递params且未写在路径中动态隐藏参数刷新会丢失。强制要求所有params参数必须在path中定义占位符如:userId否则无法持久化。Query 参数的类型URL 中的 Query 参数默认都是字符串?page1取出来是1。展示时如需数字运算记得用Number(route.query.page)或parseInt。
