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

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

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

具體代碼如下所示：

場景

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

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

constrouter=useRouter()

consttoDetail=()={

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

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

}

接收路由參數

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路由傳參總結

Vue路由傳參

1.route-link路由導航

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

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

//跳轉后拿到參數

mounted(){

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

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

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

2.$router.push

push跳轉時在函數內定義好攜帶過去的參數，在下個頁面通過$route.params拿到

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

methods:{

deliverParams(id){

this.$router.push({

path:`/d/${id}`

})

}

//拿到參數

mounted(){

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

//路由配置

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

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

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

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

deliverByName(){

this.$router.push({

name:'B',

params:{

sometext:'一只羊出沒'

}

})

}

//跳轉后params拿到數據

template

divid="b"

ThisispageB!

p傳入參數：{{this.$route.params.sometext}}/p

/div

/template

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

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

4.通過query來傳遞參數

//定義路由事件

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

deliverQuery(){

this.$router.push({

path:'/c',

query:{

sometext:'這是小羊同學'

}

})

}

//跳轉后拿到數據

template

divid="C"

ThisispageC!

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

/div

/template

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

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

注：通過這種方式拿到的數據會顯示在url中

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

總結：

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

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