路由传值的方法和区别
区别
this.$router:VueRouter 的实例,要导航到不同的URL,就要使用$router.push()
this.$route:当前router 跳转的对象,可以获取到name、path、query、params等。
{
path: '/home',
name: 'home',
component: Home
},
传参
该段转自vue路由传值的几种方法及区别
- 使用$router.push 拼接参数传参。
// userName=one 就是传递的参数
this.$router.push('/home?userName=one')
- 使用name 来确定匹配的路由,通过params 来传递参数。相当于post 请求,参数不会显示在地址栏中。
this.$router.push({
name: 'home',
params: {
userName: two
}
}
// 接收参数
this.$route.params.userName
- 使用path 来匹配路由,再通过query 来传递参数。相当于get 请求,可以在地址栏看到请求的参数。
this.$router.push({
path: '/home',
query: {
userName: three
}
}
// 接收参数
this.$route.query.userName