欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

浅析vue-router中params和query的区别

程序员文章站 2022-07-06 18:10:19
1.引入方式不同 query要用path来引入 this.$router.push({ path: 'test', query: { type: 2,...

1.引入方式不同

query要用path来引入

this.$router.push({
  path: 'test',
  query: {
    type: 2,
    detail: '哈哈'
  }
})

params要用name来引入

this.$router.push({
  name: 'test',
  query: {
    type: 2,
    detail: '哈哈'
  }
})

2.url不同

query在url中显示参数

=哈哈
params在url中不显示参数

下面整理一下这两者的差别:

1、用法上的

  刚才已经说了,query要用path来引入,params要用name来引入,接收参数都是类似的,分别是this.$route.query.name和this.$route.params.name。

注意接收参数的时候,已经是$route而不是$router了哦!!

2、展示上的

  query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示

query:       

浅析vue-router中params和query的区别

params:    

浅析vue-router中params和query的区别

总结

以上所述是小编给大家介绍的vue-router中params和query的区别,希望对大家有所帮助