vue-router中params和query的区别

一、引入方式不同

query要用path来引入 (刷新页面不会丢失参数

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

params要用name来引入(刷新页面会丢失参数

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

二、url不同

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

1、用法上的

刚才已经说了,query要用path来引入,params要用name来引入,接收参数都是类似的,分别是this. r o u t e . q u e r y . n a m e 和 t h i s . route.query.name和this. route.query.namethis.route.params.name。

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

2、展示上的

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

query:
在这里插入图片描述
params:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_45846359/article/details/113516799