query 方式 传递数据 -->
query 传递参数 字符串形式传递数据
<router-link :to="`/home/message/infor?name=xxx&id=xxx&title=xxx`"></router-link>
query 传递参数 对象形式传递数据
<router-link :to="{
path:'/home/message/infor',
query:{
name:item.name,
id:item.id,
title:item.title
}
}"></router-link>
//获取传递过来的参数
this.$route.query.name
this.$route.query.id
this.$route.query.title
命名路由 通过name配置 给路由添加名字 在router-link路由跳转里面可以通过路由的name名字实现跳转
params 方式传递数据 字符串形式传递
<router-link :to="`/home/message/infor/xxx/xxx/xxx`"></router-link>
params 方式传递数据 对象形式传递
<router-link :to="{
// path:'/home/message/infor',
name:'xiangqing',
params:{
name:item.name,
id:item.id,
title:item.title
}
}"></router-link>
获取传递过来的参数
this.$route.params.name
this.$route.params.id
this.$route.params.title
在params 以对象形式传递数据时 不能使用path 要使用name
第一种 props配置项的值为对象 向Infor组件传递静态数据
props:{name:'jack',age:'123'}
第二种 props的值为布尔值 将params数据变成props数据 传给Infor组件
props:true,
第三种 props的值为函数, props方法接受一个参数为$route 通过return 将对象传递给Infor组件
props({query}){
console.log(query,'xxx')
return {
name:query.name,
id:query.id,
title:query.title,
}
}