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"]
    具體視情況而定