Vue中路由传参的几种形式

Vue中路由传参的几种形式

• 传参链接

<router-link to="/home/message/detail/12?title=张三">detail</router-link>
  //12  为params 参数传递形式
  //title  为query 参数传递形式
           

• 路由形式

path:'detail/:id',    //params形式,params传递的参数为12
  // path:'detail',     //默认形式,query传参用的是这种形式
    component:Detail,
  // 方式一   布尔值                    
  // props:true,//将所有的params参数直接映射到props中
      //注意:这种方式只能是params传参,并且在路由接收的时候需要声明 props["id"]  来接收传递的参数值
  // 方式二 对象
  // props:{id:11,name:"张三11"}
      //注意:这种方式是自定义传参,传递的参数为死数据,并且在路由接收的时候需要声明 props["id","name"]  来接收传递的参数值
  // 方式三
  props: route => ({
    id:route.params.id,
    title:route.query.title,
    name:"自定义的值"
  })
      //注意:这种方式可以是query,也可以是params传参,并且在路由接收的时候需要声明 props["id","name"]  来接收传递的参数值
           

• 路由接收数据

一.this.$route  来接收
  二.props:["id","name"]
    具体视情况而定