回顾vue路由传值的几种方法区别

vue路由传值的几种方法区别

vue路由传值

对应的路由配置模块

{
 path:'/listdetail',
 name:'listdetail',
 component: EditCardetail
}

• 1 使用 $router.push 拼接参数传参

this.$router.push('/listdetail?listType=add')

有类似传ID的操作 字符串模板注意使用花括号

url: `/pages/visitor-detail?custId=${item.custId}&telephone=${item.telephone}`

• 2 使用name来确定匹配的路由，通过params来传递参数

this.$router.push({
	name:'listdetail',
	params:{
	    editType:add
	}
})

• 3 使用path来匹配路由，然后通过query来传递参数

this.$router.push({
    path:'/listdetail',
    query:{
        editType: add
   }
})

注意path不能与params一起使用，需要通过path来匹配路由的时候，使用query来传参、

query要用path来引入，params要用name来引入，接收参数都是类似，分别是this.router.query.name和this.router.params.name

query更加类似于我们ajax中的get传参，params则类似于post，前者在浏览器地址栏中显示参数，后者则不显示。