Vue路由跳转四法：params与query传参刷新丢失解决

脚本专家

在 Vue 项目里，页面跳转基本都由 vue-router 接管。围绕“带参数跳转”这个高频场景，实际可归纳为四类写法：router-link 声明式跳转、this.$router.push()、this.$router.replace()、this.$router.go(n)。其中前两类一旦带参数，又要区分 params 与 query——两者的 URL 表现、路由配置要求和刷新后的行为完全不同，也是实际开发中最容易出问题的地方。下面按方式逐条拆解代码与参数含义。

一、router-link：模板中的声明式跳转

1. 不带参数的两种写法

2. <router-link :to="{name:'home'}">首页</router-link>
3. <router-link :to="{path:'/home'}">首页</router-link>

复制代码

name 和 path 都能用，推荐写 name。另外要注意：to 里的链接如果以 '/' 开头，表示从根路由开始解析；不以 '/' 开头，则从当前路由开始解析，嵌套路由下这个差别会直接影响跳转结果。

2. params 传参

2. <router-link :to="{name:'home', params: {id:1}}">首页</router-link>

复制代码

params 类似 post，参数不会拼到 URL 上。它要求路由配置动态段，形如 path: "/home/:id" 或 path: "/home:id"。如果路由不配置 path，第一次跳转仍可正常请求，但刷新页面后 id 会消失；配置了 path，刷新后 id 才能保留。取值方式：模板中用 $route.params.id，脚本中用 this.$route.params.id。

3. query 传参

2. <router-link :to="{name:'home', query: {id:1}}">首页</router-link>

复制代码

query 类似 get，跳转后 URL 后面会拼接参数，形如 ?id=1，路由不需要额外配置。取值方式：模板中用 $route.query.id，脚本中用 this.$route.query.id。

二、this.$router.push()：脚本中的跳转

1. 不带参数，三种等价写法

2. this.$router.push('/home')
3. this.$router.push({name:'home'})
4. this.$router.push({path:'/home'})

复制代码

2. query 传参，name 或 path 均可

2. this.$router.push({name:'home', query: {id:'1'}})
3. this.$router.push({path:'/home', query: {id:'1'}})

复制代码

取参同样是 $route.query.id 或 this.$route.query.id。

3. params 传参

2. this.$router.push({name:'home', params: {id:'1'}})

复制代码

这里只能用 name，不能写 path。路由同样需要配置 path: "/home/:id" 或 path: "/home:id"：不配置 path，第一次可请求，刷新页面 id 会消失；配置 path，刷新后 id 会保留。取参为 $route.params.id 或 this.$route.params.id。

三、this.$router.replace()

用法与 push 完全一致，参数写法、取值方式都不变，差别只在 history 记录的处理上。

四、this.$router.go(n)

2. this.$router.go(n)

复制代码

在浏览历史中向前或向后跳转 n 个页面，n 可为正整数，也可为负整数。

五、三种编程式跳转行为对比

push：跳转到指定 URL 路径，并在 history 栈中新增一条记录，点击浏览器后退会回到上一个页面。
replace：跳转到指定 URL 路径，但 history 栈中不新增记录，相当于直接替换当前页面，点击后退会跳到上上个页面。
go(n)：在 history 栈中按步数前后移动，n 正负决定方向。

六、params 与 query 的选型，以及刷新丢参的排查思路

从行为上看，query 相当于 get，跳转后地址栏会带上 ?id=1 这类参数，适合非重要性、需要分享或刷新保留的场景；params 相当于 post，参数不出现在 URL 后面，密码之类不希望暴露在地址栏的数据可以走 params，但前提是路由必须声明动态 path，否则刷新页面 id 就会消失。

遇到“刷新后参数没了”，可以按以下顺序排查：先看跳转后的 URL 中是否出现参数，有则是 query，没有则是 params；确认是 params 后，检查 router-link 或 push 是否使用了 name 而非 path，再检查目标路由是否配置了 /:id 这类动态段，把 path 补上后刷新即可保留参数。如果业务只是偶尔跳转一次、不需要刷新保留，也可以继续沿用不配 path 的写法。

总结：声明式跳转用 router-link，脚本中用 this.$router.push；需要保留参数就用 query 或为 params 配好动态 path；需要控制浏览器后退行为时，再在 push、replace、go(n) 之间做选择。理解这四类方式与两种传参的边界，路由跳转的参数问题基本都能定位。

热心网友1

楼主这篇整理得挺完整的，尤其是把 params 和 query 的刷新行为分开讲、以及用 get/post 类比，做入门和排查都比较顺手。我自己在项目里踩过的坑基本都在这套逻辑里，补充几点实际落地时容易遇到的细节，供参考。 第一，params 刷新丢失确实是新手最常见的困惑，按楼主的排查顺序走基本能定位：先看地址栏有没有参数，有就是 query，没有就是 params；再确认 push 或 router-link 用的是 name，然后检查目标路由有没有声明动态段。需要补充的是，就算配了 /:id，如果这一层路由是嵌套子路由，也要注意父级 path 的正确书写，不然会出现参数在但组件拿不到的情况。 第二，我个人的选型建议是：只要参数需要分享、收藏、刷新保留，优先 query；params 更适合那种纯粹在页面间传递、不希望出现在地址栏的敏感数据。但也要注意，params 即使配了动态 path，参数照样会出现在地址栏里，并不等于加密。所以真正敏感的信息还是别放路由里，放状态管理或者服务端会话更稳妥。 第三，params 里传对象或者数组的话，刷新后拿到的是字符串，这点实际开发中很容易被忽略。要么在接收端做兼容处理，要么干脆序列化后走 query，或者用 sessionStorage 配合 store 做中转，具体看业务。 第四，关于 go(n) 和 replace，补充一个场景：登

热心网友1

这帖整理得挺系统，之前对 params 和 query 的区别一直有点模糊，看完清楚多了。尤其是“先看跳转后 URL 里有没有参数，有就是 query，没有就是 params”这个排查顺序，很实用，比直接翻路由配置快。 另外想确认一下，关于 router-link 的 to 里路径开头要不要带斜杠，楼主提到嵌套路由下会直接影响跳转结果。这块实际写的时候怎么判断该从根解析还是从当前路由解析？是看目标页面和当前页面是不是同级子路由吗？还有 push 和 replace 的参数写法完全一致，只有 history 记录不同，这点也记下了，之前一直以为 replace 不能带 params。

热心网友1

这篇整理得很系统，尤其是把 params 和 query 在 URL 表现、路由配置要求、刷新后的行为拆开讲，排查“刷新参数丢失”的顺序也很实用。router-link 的 to 以 / 开头从根解析这个细节确实容易被忽略，push、replace、go 在 history 记录上的区别也讲清楚了。实际项目里筛选条件、可分享的页面状态用 query 比较稳，详情页这类需要 params 的场景就配好动态 path；只是偶尔跳转、不要求刷新保留时再考虑不配 path。感谢分享。