vue路由傳參接收以及傳參對象為對象時的問題及解決

第vue路由傳參接收以及傳參對象為對象時的問題及解決目錄路由傳參接收以及傳參對象為對象時的問題場景接收路由參數(shù)vue路由傳參總結(jié)Vue路由傳參

路由傳參接收以及傳參對象為對象時的問題

具體代碼如下所示：

場景

div@click='toDetail'查看詳情/div

路由傳參不能直接傳一個對象，需要使用JSON.stringify()方法將其轉(zhuǎn)換成一個字符串，然后在其他頁面接受的時候再使用JSON.parse()方法轉(zhuǎn)換成一個對象

constrouter=useRouter()

consttoDetail=()={

//我使用的是Vue3，router要從useRouter獲取

router.push({name:'viewAttendPerson',params:{list:JSON.stringify(formObj.form.myMeetingParticipatorList)}})

}

接收路由參數(shù)

1.Vue3接收

import{useRoute}from"vue-router";

setup(){

constroute=useRoute()

constdata=JSON.parse(route.params.list)

}

2.Vue2接收

letdata=this.$route.params.list

data=JSON.parse(data)

vue路由傳參總結(jié)

Vue路由傳參

1.route-link路由導(dǎo)航

在to跳轉(zhuǎn)鏈接后傳遞參數(shù)，獲取時需要在路由配置path時注明，才能通過$route.params拿到

router-linkto="/a/123"routerlink傳參/router-link

//跳轉(zhuǎn)后拿到參數(shù)

mounted(){

this.num=this.$route.params.num

//num是在配置路由路徑時定義好的

{path:'/a/:num',name:A,component:A}

2.$router.push

push跳轉(zhuǎn)時在函數(shù)內(nèi)定義好攜帶過去的參數(shù)，在下個頁面通過$route.params拿到

button@click="deliverParams(123)"push傳參/button

methods:{

deliverParams(id){

this.$router.push({

path:`/d/${id}`

})

}

//拿到參數(shù)

mounted(){

this.id=this.$route.params.id

//路由配置

{path:'/d/:id',name:D,component:D}

3.通過路由屬性中的name匹配路由，再根據(jù)params傳遞參數(shù)

//寫好要push去到的組件名

button@click="deliverByName()"params傳參/button

deliverByName(){

this.$router.push({

name:'B',

params:{

sometext:'一只羊出沒'

}

})

}

//跳轉(zhuǎn)后params拿到數(shù)據(jù)

template

divid="b"

ThisispageB!

p傳入?yún)?shù)：{{this.$route.params.sometext}}/p

/div

/template

//路由規(guī)則定義

{path:'/b',name:'B',component:B}

4.通過query來傳遞參數(shù)

//定義路由事件

button@click="deliverQuery()"query傳參/button

deliverQuery(){

this.$router.push({

path:'/c',

query:{

sometext:'這是小羊同學(xué)'

}

})

}

//跳轉(zhuǎn)后拿到數(shù)據(jù)

template

divid="C"

ThisispageC!

p這是父組件傳入的數(shù)據(jù):{{this.$route.query.sometext}}/p

/div

/template

//路由配置無需做任何額外配置

{path:'/c',name:'C',component:C}

注：通過這種方式拿到的數(shù)據(jù)會顯示在url中

http://localhost:8080/#/csometext=%E8%BF%99%E6%98%AF%E5%B0%8F%E7%BE%8A%E5%90%8C%E5%AD%A6

總結(jié)：

1.傳參的是this.$router,接收參數(shù)是this.$route,易混淆。前者是VueRouter的實例對象，而后者則是一個跳轉(zhuǎn)的路由對象，每一個路由都會有一個route對象，是一個局部的對象。

2.params是通過name屬性傳遞數(shù)據(jù)給指定的組件，query是通