vue router 传参和接收参数的几种方式

今天在写路由的时候，不想使用
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’] 来接收参数

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

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

3. 最后是可以通过props为对象的方式进行处理静态数据,可使用对象模式
   代码如下：

	{
         path:"zdh",
         component:Zdh,
         props:{                        
      	 	name:'zhaodonghao',
            age:55
         }
    }

	// 方法一：
    props:['name','age']
    // 方法二：
    props:{
 		name:{
			type:[String,Number]
		},
		age:{
			type:[String,Number]
		}
    }

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

参考链接