Vue-router tips

1. $route和$router的区别

在vue2.0里页面参数是 this.$route.query或者 this.$route.params 接收router-link传的参数。
在路由跳转的时候除了用router-link标签以外，也可以使用this.$router.push('')。
当在控制台打出this的时候，发现$route和$router同时存在。

$router

router是VueRouter的实例，相当于一个全局路由对象，里面含有很多属性和子对象，如history，经常使用的$router.go方法就是返回上衣history。

$route

route相当于当前正在跳转的路由对象，可以获取当前router跳转对象里面的name、path、query、params等。
一个是全局的，一个是当前的

2.路由传参方式

1.手写完整path

this.$router.push({path:`/user/${userId}`})。

这样传递参数的话，配置路由的时候需要在path上加参数path:user/:userId。
这种接收参数的方式是this.$route.params.userId。

2.用params传递

router.push({name: 'user', params: {userId:123})

3.用query传递

router.push({path: 'register', query: {plan:'private})

query传参是针对path的，params传参是针对name的，二者还有点区别，直白的来说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，而params相当于post请求，参数不会再地址栏中显示