vue路由跳转携带参数刷新页面是否消失的问题（query / params）

最新推荐文章于 2023-12-13 16:45:53 发布

原创最新推荐文章于 2023-12-13 16:45:53 发布 · 993 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue学习

当前文章被收录于：

vue学习

14 篇文章 0 人学习

vue学习笔记

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍了Vue.js中路由跳转时params和query参数的使用。使用params传递的参数在URL上不显示，但刷新页面后会丢失；而使用query传递的参数会显示在URL上，刷新后仍能保留。选择params还是query取决于是否需要在URL中显示参数以及参数是否需要在页面刷新后保持。

1.刷新页面后丢失携带的参数

//这里使用name进行路由的跳转，携带参数时用params，跳转后，url上不会出现参数，刷新页面后参数会丢失
this.$router.push({
  name: "page1",
  params: { code: this.code },
});
//接收参数时用
this.$route.params.code

2.刷新页面后依旧保留参数

//但是，携带参数时用query，跳转后，url上会拼接参数，刷新页面后参数不会丢失，依然是那个带参数的url
this.$router.push({
  name: "page1",
  query: { code: this.code },
});
//接收参数时用
this.$route.query.code