IT虾米网

vue.js 路由参数传给组件详解

shasha 2021年06月15日 编程语言 227 0

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}}) 

发布评论
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

vue.js element-ui select选择器 选中对象详解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。