最近在學(xué)習(xí)用vue2.0進(jìn)行項(xiàng)目的開發(fā)删掀，由于接手項(xiàng)目的時(shí)候患膛，項(xiàng)目的完整架構(gòu)已經(jīng)搭建完畢，為了不破壞之前的項(xiàng)目人断，我就采用了比較古老的寫法吭从，說實(shí)話不采用es6的語法去寫，有好多事情都變得比較麻煩了含鳞，不過原理還是一樣的影锈，之前有寫過父與子 和子與父之間的通信，這次主要說的是兄弟組件的通信及vue路由的使用。
項(xiàng)目實(shí)景如下 ：

11.png

            <router-link   to="/group">派單分組</router-link>
             <router-link to="/rule">派單規(guī)則</router-link>
             <router-link to="/extend">派單規(guī)則擴(kuò)展</router-link>
    </div>

vue官網(wǎng)解釋：<router-link> 組件支持用戶在具有路由功能的應(yīng)用中（點(diǎn)擊）導(dǎo)航驱还。 通過 to 屬性指定目標(biāo)地址，默認(rèn)渲染成帶有正確鏈接的 <a> 標(biāo)簽凸克，可以通過配置 tag 屬性生成別的標(biāo)簽.议蟆。另外，當(dāng)目標(biāo)路由成功激活時(shí)萎战，鏈接元素自動(dòng)設(shè)置一個(gè)表示激活的 CSS 類名咐容。
（2）路由觸發(fā)之后，對(duì)應(yīng)的頁面展示
<router-view></router-view>蚂维，對(duì)戳粒，只需要將這個(gè)標(biāo)簽放到你需要放到的地方，就可以看到路由展示的頁面鸟雏，即對(duì)應(yīng)圖中的那個(gè)最大的矩形框享郊。
官方解釋：<router-view> 組件是一個(gè) functional 組件览祖，渲染路徑匹配到的視圖組件孝鹊。這就意味著路由的展示是以組件的形式進(jìn)行的
(3)、定義路由的三個(gè)組件(即與tab項(xiàng)一一對(duì)應(yīng)的)

  <template id="group">  
    ......你的代碼
  </template>
 <template id="rule">  
   ......你的代碼
 </template>
 <template id="extend">  
   ......你的代碼
 </template>

3.js頁面需要進(jìn)行如下定義
(1) 定義進(jìn)行展示的的三個(gè)路由組件（即展示在router-view中的頁面）

  var groups =  Vue.component('group',{
       template:'#group',//對(duì)應(yīng)html頁面的模板
      data:function(){
         return{
          }
     }
  }）
 var rules =  Vue.component('group',{
       template:'#group',//對(duì)應(yīng)html頁面的模板
      data:function(){
         return{
          }
     }
  }）
 var extends =  Vue.component('group',{
       template:'#group',//對(duì)應(yīng)html頁面的模板
        data:function(){
         return{
          }
     }
  }）

(2).進(jìn)行路由配置
//配置路由

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

其中path匹配的是router-link to后面對(duì)應(yīng)的路徑
component 對(duì)應(yīng)的即是該路徑下需要在<router-view>展示的組件
然后將這些配置掛載在路由實(shí)列上
(3).將配置好的路由實(shí)列掛載在頁面上

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

ok進(jìn)行以上三個(gè)步驟之后就搭建好了路由的基本功能了展蒂，搭建完成后可以跳轉(zhuǎn)又活，那怎么進(jìn)行數(shù)據(jù)的通信了，不急锰悼，我先把接下來的概念介紹了柳骄，最后在來講實(shí)際項(xiàng)目中該如何處理路由之間數(shù)據(jù)的交互....
二 組件間的通信
如果要實(shí)現(xiàn)點(diǎn)擊分頁組件或在搜素框中輸入內(nèi)容就能展示對(duì)應(yīng)的頁面信息，由于我將這幾個(gè)不同的功能劃分為不同的組件箕般，而這幾個(gè)組件的關(guān)系是平行的耐薯，就是所謂的兄弟組件（這個(gè)和在dom元素中定義兄弟元素是一個(gè)道理），所以要想實(shí)現(xiàn)上面的功能，就需要掌握兄弟組件的通信方法曲初，按照習(xí)慣一步一步來看
(1)掌握 vm.$on 体谒、vm.$emit的概念
vm.$on：監(jiān)聽當(dāng)前實(shí)例上的自定義事件。事件可以由vm.$emit觸發(fā)臼婆∈阊鳎回調(diào)函數(shù)會(huì)接收所有傳入事件觸發(fā)函數(shù)的額外參數(shù)“涔樱可以理解為信息的接收源故响。
vm.$emit：觸發(fā)當(dāng)前實(shí)例上的事件，也就是信息的發(fā)起源颁独；
注意兩者都是針對(duì)同一實(shí)列才起作用的彩届，因?yàn)樾值芙M件是不同的實(shí)列，所以為了實(shí)現(xiàn)這種一個(gè)發(fā)起一個(gè)接收的通信方法需要進(jìn)行變通誓酒。
(2)創(chuàng)建一個(gè)中間變量惨缆，來進(jìn)行信息的發(fā)送與接收
vue官方給出的方法：有時(shí)候兩個(gè)組件也需要通信 (非父子關(guān)系)。在簡(jiǎn)單的場(chǎng)景下丰捷，可以使用一個(gè)空的 Vue 實(shí)例作為中央事件總線
即為了滿足同一實(shí)列下的通信限制坯墨，我們采用空的 Vue 實(shí)例來進(jìn)行通信，將.$on和$emit同時(shí)綁定在此實(shí)列上
(3)實(shí)現(xiàn)代碼：
// 創(chuàng)建一個(gè)空的vue實(shí)列
var bus = new Vue()病往；
//在分頁組件中捣染，當(dāng)頁數(shù)或當(dāng)前頁發(fā)生變化時(shí)發(fā)起通信,如下代碼

33.png

22.png

三钧排、接路由留下的問題，那么路由切換時(shí)如何進(jìn)行數(shù)據(jù)的初始化
vue官方給出了兩個(gè)方案：
1均澳、導(dǎo)航完成之后獲群蘖铩：先完成導(dǎo)航符衔，然后在接下來的組件生命周期鉤子中獲取數(shù)
據(jù)。
2糟袁、導(dǎo)航完成之前獲劝啬濉：導(dǎo)航完成前，在路由的 enter 鉤子中獲取數(shù)據(jù)系吭，在數(shù)據(jù)獲取成功后執(zhí)行導(dǎo)航
意思就是切換導(dǎo)航頁和獲取數(shù)據(jù)信息的順序問題五嫂，兩者都可以，根據(jù)需求來進(jìn)行選擇
我采用的是第一種肯尺，先切換導(dǎo)航頁然后在進(jìn)行ajax的請(qǐng)求沃缘，看代碼
//初始化
created () {
// 組件創(chuàng)建完后獲取數(shù)據(jù)，
// 此時(shí) data 已經(jīng)被 observed 了
this.fetchData()
}
//如果路由改變進(jìn)行數(shù)據(jù)的加載

44.png

//觸發(fā)的ajax請(qǐng)求

55.png

好了则吟，我這也許講的不是很深槐臀，但是我覺得講的還是詳細(xì)的，只看官網(wǎng)不去自己實(shí)踐一把氓仲，感覺還是不好理解水慨，希望我的經(jīng)驗(yàn)?zāi)軒椭愀玫睦斫?