router路由传参props

使用props可以降低耦合度,取代$route

什么是代码的耦合?

模块之间的联系紧密成度
联系越紧密就是耦合度越高&＃xff0c;这样是不好的。因为模块和模块要低耦合才对。。

高内聚、低耦合的模块是设计时追求的目标。

衡量模块独立性的定性标准是内聚&＃xff08;一个模块内各个元素彼此结合的紧密程度&＃xff09;和耦合&＃xff08;一个软件结构内不同模块之间互连程度的度量&＃xff09;。

路由代码传参

import About from &＃39;&＃64;/About&＃39;
{path :&＃39;/about/:id&＃39;,//动态路由component:About,props:true
}{path:&＃39;/about&＃39;,//普通路由component:About,props:{id:19}
}


模板代码传参

props:[&＃39;id&＃39;]或者props:{id:{type:Number,//数据约束类型default:12//默认参数}}


布尔模式

如果props被设置为 true , router.params将会被设置为组件属性.
路由中

{path:"/about/:id"//动态路由component:About,props:true
}


组件中接收:

props:[&＃39;id&＃39;]


对象模式

如果props是一个对象,他会被设置为组件属性.
路由中:

path:&＃39;/about/:id&＃39;,//动态路由
component:About,
props:{id:18
}


组件中接收

props:{id:{type:Number,//约束类型default:12//默认参数}
}


函数模式

你可以创建一个函数返回props.这样你便可以将参数转换成另一种类型,将静态值与基于路由的值结合等等.

routes:[{path:&＃39;/search&＃39;,component:SearchUser,props:route &＃61;> ({name:route,query.q})//返回对象 可以用()包住,//或者props:a&＃61;>{return{name:a.query.name}}}
]props:()&＃61;>({name:&＃39;张三&＃39;})