vue使用路由在兄弟组件间参数传递

摘要：
在没有使用路由时，vue中参数传递是被限制在父子组件中，而当兄弟组件间需要传递参数时是很繁琐的，只能子传父父传子这样绕圈；但使用了路由之后就变得轻松许多。
根组件App：

router-view的注意点在代码中已经注释。
HelloWorld组件：

在这个组件中使用编程式导航进行跳转(router-link标签为申明式导航，且可以很方便的借助此标签的动态类名做高亮效果)，并借助query查询字符串来传递参数
Test组件：


在Test组件中可以通过self.$route.query来调取路由相关的参数，$route里面有很多属性可以console看看

可以看见，包含了当前组件路由的所有信息，fullPath,matched,query,params,meta等（侧边栏动态路由高亮以及默认，就会用到matched中对象的path属性进行判断），到此借助路由的查询字符串传参已经完成了
还可以借助路由的params来传递参数
HelloWorld组件：

Test组件：


但是如果我们将path和params一起用呢

一起用的结果就是参数传递失败，原因在路由官网有说明

所以说明path+query，name+parmas都可以传递参数，也可以像官网说的一样直接用path中用模板字符串+占位符来拼接url，且不管是path还是name，都是指明了特定组件的，所以只会向指定的组件路由上去注入参数，其他兄弟组件的路由是接收不到的。

还有一种方式也是官方推荐的：


在定义路由时，加上props属性，将route作为参数传进箭头函数，然后取出里面的查询字符串并存进了props
HelloWorld组件：

路由index.js文件：

Xx组件：


页面：


这种方式传递参数，一是需要在配置路由时把props定义为一个函数，二是在组件内用props去接收，就完成了。
欢迎指正。

	我们可以发现router.push跟 window.history.pushState和 window.history.go好像， 实际上它们确实是效仿 window.history API 的。