Vue Router 的params和query传参的使用和区别

说起params和query就得先说明一下 $router和$ route的区别
官方文档是这样说明的：
通过注入路由器，可以在任何组件内通过this.$router访问路由器，也可以通过this.$route访问当前路由
可以理解为：
this.$router相当于一个全局的路有对象，包含了很多属性和对象（比如history对象），任何页面都可以调用其push()、replace()、go()等方法
this.$route表示当前路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name、path、params、query等属性。
简单来说：
$router:是路由操作对象，只写对象
$route:是路由信息对象，只读对象

// 操作路由跳转
this.$router.push({
  name:'hello',
  params:{
    name:'world',
    age:11
  }
})
//读取 路由参数
this.name = this.$route.params.name;
this.age = this.$route.params.age

query传递参数

很多大佬都说是query传参需要使用path来引入，params传参主要用name来引入。也有其他人说query也可以使用name和path来引入传参。大概如下所示，有兴趣可以亲自测试。

// query传参 使用name跳转
this.$router.push({
   name:'second',
  query:{
    queryId:'1111',
    queryName:'query'
  }
})

// query传参,使用path跳转
this.$router.push({
  path:'second',
  query:{
     queryId:'1111',
      queryName:'query'
   }
})

// query 传参接收
this.queryName = this.$route.query.queryName
this.queryId = this.$route.query.queryId

HelloWorld.vue文件传参

name方式.png

path方式.png

Second.vue接收参数以及控制台打印值

second接收.png

控制台打印.png

路由配置

路由配置.png

最后，不管是path还是name引入效果都是一样的

展示效果.png

params传递参数

使用params传参只能使用name进行引入

// params传参 使用name
this.$router.push({
 name:'second',
 params:{
   id:'111',
   name:'params'
 }
})

// params 接收参数
this.id  = this.$route.params.id;
this.name = this.$route.params.name;

// 路由
{
 patth:'/second/:id/:name',
 name:'second',
 component:()=>import('@/view/second')
}

HelloWorld.vue文件传参

path方式.png

Second.vue接收参数以及控制台打印值

second接收.png

控制台打印.png

效果图如下：

展示效果.png

需要注意的是：
1、params是路由的一部分，必须在路由后面添加参数名。query是拼接在url后面的参数。没有也没关系。
2、params一旦设置路由，params就是路由的一部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。

如果路由后面没有 /:id/:name，刷新一下效果如下图，地址栏没有参数

路由后无参数.png

因此我们不能阻止用户不让他去刷新，所以，必须在路由后面加上参数。
如果使用path传参

this.$router.push({
  path:'Second',
   params:{
      paramsId:'1111',
      paramsName:'params'
   }
 })
//接收参数
this.paramsName = this.$route.params.paramsName;
this.paramsId = this.$route.params.paramsId

显示效果如下所示：

path.png

总结

1、传参可以使用params和query两种方式。
2、使用params传参只能用name来引入路由，即push里面只能是name:’xxxx’,不能是path:’/xxx’,因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！。
3、使用query传参使用path来引入路由。
4、params是路由的一部分,必须要在路由后面添加参数名。query是拼接在url后面的参数，没有也没关系。
5、二者还有点区别，直白的来说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示。