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

2022-10-09,,,,

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:       

params:    

总结

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

《浅析vue-router中params和query的区别.doc》

下载本文的Word格式文档,以方便收藏与打印。