query和params的区别

最新推荐文章于 2025-03-11 11:28:52 发布

fishboner

最新推荐文章于 2025-03-11 11:28:52 发布

阅读量185

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_43388031/article/details/129867543

版权

1 篇文章

订阅专栏

在Vue.js中，路由参数可以通过query和params两种方式传递。query类似于GET请求，参数显示在URL且刷新后仍保留；params用于命名路由，参数不显示在URL，刷新后数据会丢失。params必须配合路由名称使用。

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

query

传参: 
this.$router.push({
        path:'/xxx',
        query:{
          id:id
        }
      })
  
接收参数:
this.$route.query.id

传参: 
this.$router.push({
        name:'xxx',
        params:{
          id:id
        }
      })
  
接收参数:
this.$route.params.id

query：/router1?id=123 ,  //router1?id=456 ,这里的id叫做query。
params：/router1/:id ，    //router1/123，/router1/789 ,这里的id叫做params

params必须用到name，query不需要
query类似于get请求，params相当于post
query浏览器url栏可以看到传的参数，params不会看到参数
1. query:localhost:8080/argue?name=fishboner&id=123
2. params::localhost:8080/argue
query会保存传递过来的值，刷新不变，而params不会