路由传递参数

一、路由传参对象写法，path不可以结合params参数一起使用，params传参必须使用name，即给路由配置name。

二、指定params参数可传可不传，可以在占位后面加问号，如果传递的是空串，使用undefined解决

接收参数的组件

{
	name:'home',
	path:'/home/:id?'//一种参数
	/*path:'/home/:id?/:name'//两种参数*/
	component:Home
}

传递参数的组件

this.$router.push({
	name:'about',
	params:{id:动态||undefined,},//id可能为空串使用undefined解决
	query:{inputText:动态}
})

三、路由组件传递props数据，说白了就是把About组件传递给Home组件的参数转为props数据方便接收

router.js

{
	name:'home',
	path:'/home/:id?',
	component:Home,
	/*首先在路由组件配置，有三种写法*/
	props:true//布尔值写法只能传递params参数，会把上面的params:{id:动态||undefined}传递给Home组件

	props:{key:123}//可以把对象中所有的key-value传给home组件

	props(变量){
		return {
			id:变量.params.id,
			inputText:变量.query.inputText
		}
	}
}

home组件接收

export default{
	name:'Home',
	
	//接收方式一：props只能写一个
	props:['id'],//第一种接收情况
	props:['key'],//第二种接收情况
	props:['id','inputText'],//第三种接收情况

	//接收方式二可以直接使用
	//id
	this.$route.params.id
	//key是用props:{key:3}对象写法传的只能用props接收
	
	//inputText
	this.$route.query.inputText
	
}