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:true，因为它代表从params中取参，这里要从query中取参。

{ 
	name:"myPath", 
	path:"/myPaht", 
	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}})