一、路由传参

params参数：属于路由中的一部分，在配置路由的时候，必须占位

query参数：不属于路由当中的一部分，类似于ajax中的queryString(/home?a=1&b=2)

	//第一种：字符串形式
	this.$router.push("/search/" + this.keyword + "?k=" + this.keyword.toUpperCase());
	//第二种：模板字符串
	this.$router.push(`/search/${this.keyword}?k=${ this.keyword.toUpperCase()}`);
	//第三种：对象
	this.$router.push({
		name:"search",
		params:{keyword:this.keyword},
		query:{k:this.keyword.toUpperCase()}
	})
	/*
		注意：使用对象形式配合params传参时，必须使用name属性，不能使用path
	     	 name 是配置路由时给 path 取的别名，方便使用
	     	 
	    $router : 是路由操作对象，只写对象
		$route : 路由信息对象，只读对象
	*/

params和query区别：

1.query可以通过name属性或者path属性来引入路由，而params只能通过name属性来引入路由；在使用params传递时如果指定了path属性而没有name属性，那么界面能成功跳转但是不能接受到传递过来的参数 2.query传递参数时会地址栏会发生改变，传递参数会携带在路径中，而params则不会 3.在刷新界面时，query传递的参数不会丢失，而params会丢失

二、路由传参相关题

1.如何指定params参数可传可不传

在配置路由的时候，在**占位的后面加上一个？**即可

export default {
    routes:[
        {
            path:'/search/:keyword?'
        }
    ]
}

2.params参数可以传递也可以不传递，但如果传递的是空串，如何解决？

//使用undefined解决
this.$router.push({
		name:"search",
		params:{keyword:"" || undefined}, //当传递为空串时候，加个undefined
		query:{k:this.keyword.toUpperCase()}
	})

3.路由组件能不能传递props数据？

能

export default {
    routes:[
        {
            path:'/search/:keyword?'

            	//第一种：布尔值写法(只准传params参数，不准传query参数)
            	props:true 
            	//第二种：对象写法
            	props:{a:1,b:2}
            	//第三种：函数写法(可以传params、query参数)
            	props:($route) => {
            		return {
            			keyword:$route.params.keyword,
            			k:$route.query.k
            		}
            	}
            	//传递参数后同时也要在相关组件接收
            	props:['变量名']
        }
    ]
}