今天在写路由的时候,不想使用
this.$router.push({name: 'goodslist',params:{"list":this.list}})
接收方法:this.$route.query.list
这种通过$router对象点击获取值的方式,就在网上找了一些其他方式发现了props接收参数的方法

实例如下:

  1. 首先是通过props设置为true,可以进行布尔传值,可以接受params的方法进行传递
    代码如下:
	{
       path:"zdh/:name/:price",//定义其属性
       component:Zdh,
       props:true
    }

在组件中可直接通过 props:[‘name’,‘price’] 来接收参数

  1. 其次是通过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]
 		}
 	 }

在组件中可直接通过 如上方式来接收参数

  1. 最后是可以通过props为对象的方式进行处理静态数据,可使用对象模式
    代码如下:
	{
         path:"zdh",
         component:Zdh,
         props:{                        
      	 	name:'zhaodonghao',
            age:55
         }
    }
	// 方法一:
    props:['name','age']
    // 方法二:
    props:{
 		name:{
			type:[String,Number]
		},
		age:{
			type:[String,Number]
		}
    }

在组件中可直接通过 如上方式来接收参数

参考链接

Logo

前往低代码交流专区

更多推荐