query和params传参

最新推荐文章于 2025-07-07 08:28:04 发布

昵称叫铃风的小前端

最新推荐文章于 2025-07-07 08:28:04 发布

阅读量3.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_37246828/article/details/90752440

vue 专栏收录该内容

9 篇文章

订阅专栏

本文深入探讨了Vue中路由参数（params）与查询字符串（query）的区别与使用场景。params用于配置路由，其值会以路径形式显示，刷新不丢失；query则直接附加在URL上，刷新仍保留。文章通过代码示例展示了如何在Vue中设置和获取这两种参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

query传参会显示在url，刷新依然在；params如果配置了路由，会以/val1/val2的形式值显示在路由，刷新不会丢失；如果不配置路由，数据不会显示在url，刷新会丢失。

// query

this.$router.push({
  path: '/publicOpinionManage/publicOpinionMonitor/news',
  query: this.utils.encrypt64({
    id: id,
    mediaType: mediaType
  })
})
// 接收
this.$route.query

// param

// router.js
path: '/publicOpinionManage/publicOpinionMonitor/news/:data'
// vue
this.$router.push({
  name: 'news',
  params: this.utils.encrypt64({
    id: id,
    mediaType: mediaType
  })
})
// 接收
this.$route.params
// url显示：
http://localhost:8080/publicOpinionManage/publicOpinionMonitor/news/1