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

首先简单来说明一下$router和$route的区别

//$router : 是路由操作对象，只写对象
//$route : 路由信息对象，只读对象

//操作 路由跳转
this.$router.push({
      name:'hello',
      params:{
          name:'word',
          age:'11'
     }
})

//读取 路由参数接收
this.name = this.$route.params.name;
this.age = this.$route.params.age;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

传参可以使用params和query两种方式。

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