Vue中this.$router.push()路由跳转页面并传值最常见两种方式_vue router push query

1. query传参

//	query传参
//  传值
this.$router.push({ name: 'orderList', query: { conlltion: id }})
this.$router.push({path:'/orderList',query: {conlltion: id }})
// html取值 
$route.query.conlltion
// script取值 
this.$route.query.conlltion

2. params传参

//	params传参 
//  传值
this.$router.push({ name: 'orderList', params: { conlltion: id }})	// 只能用 name
// html 取值  
$route.params.conlltion
// script 取值  
this.$route.params.conlltion

区别

两种方式的区别是query传参的参数会带在url后边展示在地址栏，params传参的参数不会展示到地址栏。

扩展

1.需要注意的是接收参数的时候是route而不是router。两种方式一一对应，名字不能混用。

2.由于动态路由也是传递params的，所以在 this.$router.push() 方法中path不能和params一起使用，否则params将无效。只能用name来指定页面。

3.不带参数，直接跳转页面

this.$router.push('/orderList')
this.$router.push({name:'orderList'})
this.$router.push({path:'/orderList'})