vue2.0之兄弟组件通信及路由

最近在学习用vue2.0进行项目的开发，由于接手项目的时候，项目的完整架构已经搭建完毕，为了不破坏之前的项目，我就采用了比较古老的写法，说实话不采用es6的语法去写，有好多事情都变得比较麻烦了，不过原理还是一样的，之前有写过父与子 和子与父之间的通信，这次主要说的是兄弟组件的通信及vue路由的使用。
项目实景如下 ：

11.png

按照路由----组件通信 ------ 路由切换时的数据加载 方式来进行剖析，嘎嘎我都不好生意用这个词，嘿嘿，希望你能学到东西
一、路由
概念：vue中的路由允许我们通过不同的 URL 访问不同的内容看，针对我刚刚贴的图来说。也就是我每次切换tab时，由于tab对应的url都不同，就可以通过url来找到对应展示的页面。
那完成一个路由功能只需要如下步骤：
1、引入vue-router,可以通过npm进行下载，在按照如下方式进行引入

2.html页面上进行如下定义
(1)、路由切换的入口，点击就会触发路由事件（暂且这么说><）

            派单分组
             派单规则
             派单规则扩展
    

vue官网解释： 组件支持用户在具有路由功能的应用中（点击）导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。
（2）路由触发之后，对应的页面展示
，对，只需要将这个标签放到你需要放到的地方，就可以看到路由展示的页面，即对应图中的那个最大的矩形框。
官方解释： 组件是一个 functional 组件，渲染路径匹配到的视图组件。这就意味着路由的展示是以组件的形式进行的
(3)、定义路由的三个组件(即与tab项一一对应的)

3.js页面需要进行如下定义
(1) 定义进行展示的的三个路由组件（即展示在router-view中的页面）

  var groups =  Vue.component('group',{
       template:'#group',//对应html页面的模板
      data:function(){
         return{
          }
     }
  }）
 var rules =  Vue.component('group',{
       template:'#group',//对应html页面的模板
      data:function(){
         return{
          }
     }
  }）
 var extends =  Vue.component('group',{
       template:'#group',//对应html页面的模板
        data:function(){
         return{
          }
     }
  }）

(2).进行路由配置
//配置路由

    var routes = [ 
        {path:'/group', component :groups},
        {path:'/rule', component:rules},
        {path:'/extend',component:extends},
        //重定向
        {path:'*',redirect:'/group'}
     ]
     //生成路由实例
    var router = new VueRouter({
        routes
    })

其中path匹配的是router-link to后面对应的路径
component 对应的即是该路径下需要在展示的组件
然后将这些配置挂载在路由实列上
(3).将配置好的路由实列挂载在页面上

var routerApp =  new Vue({
        el:"#ruleApp",
        router,
        data:{
         }
    })

ok进行以上三个步骤之后就搭建好了路由的基本功能了，搭建完成后可以跳转，那怎么进行数据的通信了，不急，我先把接下来的概念介绍了，最后在来讲实际项目中该如何处理路由之间数据的交互....
二 组件间的通信
如果要实现点击分页组件或在搜素框中输入内容就能展示对应的页面信息，由于我将这几个不同的功能划分为不同的组件，而这几个组件的关系是平行的，就是所谓的兄弟组件（这个和在dom元素中定义兄弟元素是一个道理），所以要想实现上面的功能，就需要掌握兄弟组件的通信方法，按照习惯一步一步来看
(1)掌握 vm.$on 、vm.$emit的概念
vm.$on：监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。可以理解为信息的接收源。
vm.$emit：触发当前实例上的事件，也就是信息的发起源；
注意两者都是针对同一实列才起作用的，因为兄弟组件是不同的实列，所以为了实现这种一个发起一个接收的通信方法需要进行变通。
(2)创建一个中间变量，来进行信息的发送与接收
vue官方给出的方法：有时候两个组件也需要通信 (非父子关系)。在简单的场景下，可以使用一个空的 Vue 实例作为中央事件总线
即为了满足同一实列下的通信限制，我们采用空的 Vue 实例来进行通信，将.$on和$emit同时绑定在此实列上
(3)实现代码：
// 创建一个空的vue实列
var bus = new Vue()；
//在分页组件中，当页数或当前页发生变化时发起通信,如下代码

33.png

//分页组件发生变化后，我需要在路由组件中（即当前路由下展示的信息，关于后台获取的信息的代码都在此组件中完成的：ajax请求中会包含当前页和展示页数及搜索的条件，所以需要从分页组件获取实时的页数信息）来监听同一实列发出的信息源
//在需要获取信息的组件中通过bus进行监听，从而获取数据，如下代码，注意_this为当前实列即var _this = this;否则如果直接使用this就代表了bus这个实列而不是当前实列了，注意喽。

22.png

其中emit中定义的事件名字要和on监听事件的名字一样，整体的思路就是当我在分页组件中监听（watch）到当前页和展示页发生变化时，就触发相应的事件(bus.$emit)然后在路由组件中来进行事件的监听（bus.$on），将监听的数据在赋值给当前属性rows和currenPage，然后触发ajax请求进行数据的更新
总体概况兄弟组件通信的原理：使用$emit和$on进行信息的发送和接受，通过新建空的vue实列来解决信息发送和接收必须在同一实列上的限制。

三、接路由留下的问题，那么路由切换时如何进行数据的初始化
vue官方给出了两个方案：
1、导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数
据。
2、导航完成之前获取：导航完成前，在路由的 enter 钩子中获取数据，在数据获取成功后执行导航
意思就是切换导航页和获取数据信息的顺序问题，两者都可以，根据需求来进行选择
我采用的是第一种，先切换导航页然后在进行ajax的请求，看代码
//初始化
created () {
// 组件创建完后获取数据，
// 此时 data 已经被 observed 了
this.fetchData()
}
//如果路由改变进行数据的加载

44.png

//触发的ajax请求

55.png

好了，我这也许讲的不是很深，但是我觉得讲的还是详细的，只看官网不去自己实践一把，感觉还是不好理解，希望我的经验能帮助你更好的理解.