vue router 3方式伝達パラメータ

目次
1.urlの後に直接パラメータ名を付ける
2.name属性で値を渡す
3.path属性で値を渡す
三者の区別
1.urlの後に直接パラメータ名を付ける
設定

{
	path:'/detail/:id',    //      ，      
	component:Detail
}

トランスファ

goodsClick(id){
   this.$router.push('/detail/'+id)  //     ，      
}
//     
goodsClick(id){
   this.$router.push({
      path:'/detail/'+id
   })
}

取得

2.name属性で値を渡す
設定

{
	path:'/detail',
    name:'Detail',      //    name      
	component:Detail
}

トランスファ

goodsClick(id){
    this.$router.push({
       name:'Detail',       // name    
       params:{             //params      
         id
       }
    })
}

取得

3.path属性で値を渡す
設定

{
	path:'/detail',   //    path       
	component:Detail
}

トランスファ

goodsClick(id){
    this.$router.push({
       path:'/detail',        //path    
       query:{               //query    
          id
       }
    })
}

取得

三者の区別
1.urlの後に直接値を伝え、$route.params取得パラメータ値
パラメータはurlの後ろに表示され、例:localhost:8080/detail/1 lyp 2 vg、直接
2.name,paramsで参照を行い,$route.params取得パラメータ値
パラメータはurlの後ろに表示されません.例:localhost:8080/detail、
注意:ページをリフレッシュすると、渡された値が失われます.
3.path,queryで参照を行い,$route.queryパラメータ値の取得
パラメータはurlの後ろに表示されます.例:localhost:8080/detail?id=1m7jj7a   ?後key=valueモードに従い、