目錄
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
})
}獲取
<template>
<div>
我是Detail
{{$route.params.id}} //params獲取資料
</div>
</template>2.用name屬性進行傳值
設定
{
path:'/detail',
name:'Detail', //運用這個name屬性進行跳轉
component:Detail
}傳遞
goodsClick(id){
this.$router.push({
name:'Detail', //用name進行跳轉
params:{ //params屬性傳遞引數
id
}
})
}獲取
<template>
<div>
我是Detail
{{$route.params.id}} //params獲取資料
</div>
</template>3.用path屬性進行傳值
設定
{
path:'/detail', //運用這個path屬性進行跳轉
component:Detail
}傳遞
goodsClick(id){
this.$router.push({
path:'/detail', //path進行跳轉
query:{ //query傳遞引數
id
}
})
}獲取
<template>
<div>
我是Detail
{{$route.query.id}} //注意，這里是query哦
</div>
</template>三者的區別
1.直接在url后面傳值，用 $route.params 獲取引數值
引數在url后面顯示，例: localhost:8080/detail/1lyp2vg ，直接跟著
2.用name，params進行傳參，用 $route.params 獲取引數值
引數在url后面不顯示，例:localhost:8080/detail，
注：在重繪頁面的時候，傳遞的值會丟失；
3.用path，query進行傳參，用$route.query獲取引數值
引數在url后面顯示，例: localhost:8080/detail?id=1m7jj7a ?后key=value模式跟著，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/259685.html
標籤：其他