动态路径
第一种方法是通过动态路由完成
{
path:"/item/:name",
name:"item",
component:Item,
props:true
}
这样会识别name为任意值, 比如 /item/apple
会被识别为item组件中name名为apple
优点 - 适合对应变化性比较强的内容路由,比如有几十个相类似的item,这种方法就很实用
缺点 - 耦合性高
传参方式
这种方法是给组件定义一个独有的路由地址,来解析同一个组件
{
path:"/apple",
name:"item apple",
component:Item,
props:{name:"apple"}
},
{
path:"/orange",
name:"item orange",
component:Item,
props:{name:"orange"}
}
优点 - 分配固定路由,参数可以随便传,当参数多的时候,也不怕地址栏过长的问题,耦合性低
缺点 - 暂无
组件接收说明
export default{
name:"item",
props: {
name:{
type:String,
default: 'apple'
}
}
}
!!!当定义了props参数后,不需要再在data下定义,他会自动产生data参数, 也不需要this.name = this.$route.params.name;
这样赋值!!!