vue router 传参和接收参数的几种方式
今天在写路由的时候,不想使用this.$router.push({name: 'goodslist',params:{"list":this.list}})this.$route.query.list这种通过$router对象点击获取值的方式,就在网上找了一些其他方式发现了props接收参数的方法实例如下:首先是通过props设置为true,可以进行布尔传值,可以接受params的方法进行传递代码
·
今天在写路由的时候,不想使用
this.$router.push({name: 'goodslist',params:{"list":this.list}})
接收方法:this.$route.query.list
这种通过$router对象点击获取值的方式,就在网上找了一些其他方式发现了props接收参数的方法
实例如下:
- 首先是通过props设置为true,可以进行布尔传值,可以接受
params
的方法进行传递
代码如下:
{
path:"zdh/:name/:price",//定义其属性
component:Zdh,
props:true
}
在组件中可直接通过 props:[‘name’,‘price’] 来接收参数
- 其次是通过props为函数时进行传值,此时用的
query
方式进行参数的传递
代码如下:
// 方法一
{
path:"zdh",
component:Zdh,
props : (route) => ({
name : route.query.name,
age : route.query.age
})
}
// 方法二
{
path:"zdh",
component:Zdh,
// 将你传参query的所有值注入,接收的时候通过props接收就行 名称则是你传的名称
props : (route) => (route.query)
}
//方法一:
props:['name','age']
//方法二:
props:{
name:{
type:[String,Number]
},
age:{
type:[String,Number]
}
}
在组件中可直接通过 如上方式来接收参数
- 最后是可以通过props为对象的方式进行处理
静态数据
,可使用对象模式
代码如下:
{
path:"zdh",
component:Zdh,
props:{
name:'zhaodonghao',
age:55
}
}
// 方法一:
props:['name','age']
// 方法二:
props:{
name:{
type:[String,Number]
},
age:{
type:[String,Number]
}
}
在组件中可直接通过 如上方式来接收参数
更多推荐
已为社区贡献2条内容
所有评论(0)