说起params和query就得先说明一下
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请求，参数不会再地址栏中显示。
网友评论