Vue路由

路由传值的方法和区别

区别

this.$router：VueRouter 的实例，要导航到不同的URL，就要使用$router.push()

this.$route：当前router 跳转的对象，可以获取到name、path、query、params等。

{
	path: '/home',
	name: 'home',
	component: Home
},

传参

该段转自vue路由传值的几种方法及区别

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

// userName=one 就是传递的参数
this.$router.push('/home?userName=one')

2. 使用name 来确定匹配的路由，通过params 来传递参数。相当于post 请求，参数不会显示在地址栏中。

this.$router.push({
	name: 'home',
	params: {
		userName: two
	}
}

// 接收参数
this.$route.params.userName

3. 使用path 来匹配路由，再通过query 来传递参数。相当于get 请求，可以在地址栏看到请求的参数。

this.$router.push({
	path: '/home',
	query: {
		userName: three
	}
}

// 接收参数
this.$route.query.userName