路由的三种传参方式

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