VUE路由传参主要的3种方式

VUE路由传参有3种方式

1)query方式

(push时使用path来匹配)

发起页面:

this.$router.push({

path: "/accept", //接收页面路由

query: {

id: 222

}

});

路由配置:

routes: [

{

path: "/accept"

}

]

接受参数页面:

export default{

data(){

return{

id: this.$router.query.id; //这里接收参数

}

}

}

跳转转收页面的时候,地址栏会显示:

http://ip:port/accept?id=222

2)params模式

(push时使用name来匹配)

发起页面:

this.$router.push({

name: "accept", //路由配置中的name

params:{

id:222

}

});

路由配置:

routes: [

{

name: "accept",

path: "/accept"

}

]

接收参数页面:

export default{

data(){

return{

id: this.$router.params.id; //这里接收

}

}

}

跳转转收页面的时候,地址栏显示目的地址,不带任何参数

3)location预声明参数模式

(push使用path来匹配,但是它跟params模式不同)

发起页面:

this.$router.push({

path: '/accept/222'

});

路由配置:

routes: [

{

path: "/accept/:id"

}

]

接收参数页面:

export default{

data(){

return{

id: this.$router.params.id

}

}

}

路由跳转时,url会显示:

http://ip:port/accept/222