vue-router中通过路由跳转过程中想要传递参数,例如下面所示:
this.$router.push({
path:'/xxx',
query:{
id:1
}
})
一 使用path方式跳转
注意:只能使用query方式传参,不能使用params,如果写成params接收参数页面会是undefined.因为params只能用name来引入路由.
传参:
this.$router.push({
path:'/xxx',
query:{
id:1
}
})
接收参数:
this.$route.query.id
二 使用name方式传递
方式一:
传参:
this.$router.push({
name:'xxx',
query:{
id:1
}
})
接收参数:
this.$route.query.id
方式二:
传参:
this.$router.push({
name:'xxx',
params:{
id:1
}
})
接收参数:
this.$route.params.id
传参方式query和params的区别:
1.query传递显示参数在地址栏,params传递参数不显示在地址栏,params相对于query更安全一点;
2.取值方法不同:this.$route.query.xxx | this.$route.params.xxx
query传值刷新页面数据还在,params刷新页面数据消失;
3.query相当于get请求,params相当于post请求;
跳转方式path和name的区别:
1.query方式
配置路由格式: /router (也就是普通配置)
传递的方式:对象中使用query的key作为传递方式
传递后形成的路径: /router?id=123
2.params方式
配置路由格式: /router/:id
传递的方式: 在/path后面跟上对应的值
传递后形成的路径: /router/123
具体的方法看后续: