vue.js 路由参数传给组件

vue.js中路由传参、获取参数是个常见问题，通常我们会在组件中通过路由获取参数

<div>
{{$route.params.id}}
</div>

这样就将路由与组件耦合了，组件依赖路由，无法单独测试，为了解耦可将路由参数当作props传给组件。

params时的解耦方式

我们都知道，路由传参有两种方式，params和query。先看params如何当作props传入组件。
第一，在router.js定义路由时，声明props:true，代表将$route.params作为属性传给组件。

{
	name:"myPath",
	path:"/myPath",
	component:MyComponent
	props:true,
}

第二，在组件props中声明相应属性。比如，params要传id，那么

props:{
		id:Number
	}

第三，push路由时，传入params，注意此处的params参数名字要和组件props中的名字对应起来。

this.$router.push({name:"myPath",params:{id:1}})

params传参有个缺点就是，刷新页面后，params就没有了。所以我更倾向使用query传参，那么query怎么实现路由传参呢？

query时的解耦方式

一共需要三步。
第一，在router.js中，设置props从query中取参。

{
	name:"myPath",
	path:"/myPath",
	component:MyComponent
	props:(route)=>{return {id:route.query.id}},
}

第二，组件中，定义props接收id，此处与params传参接收方式一样的。

props:{
	id:Number
}

第三，push路由时，传入query，这里用了命名路由。

this.$router.push({name:"myPath",query:{id:1}})

也可以使用path方式。

this.$router.push({path:"/myPath",query:{id:1}})