本文是Vue實(shí)戰(zhàn)系列的第四篇文章，主要介紹Falcon項(xiàng)目本身的布局結(jié)構(gòu)和路由凳宙。
Falcon項(xiàng)目地址：https://github.com/thierryxing/Falcon

Vue組件

Vue其中的一個(gè)重要思想就是：一切皆組件当叭，一切皆由組件構(gòu)成茬故。

按照這個(gè)思想，我們?cè)谀玫揭粋€(gè)頁(yè)面后蚁鳖，第一件事需要像庖丁解牛一樣將其分割成不同的組件磺芭，然后由這些組件構(gòu)成整個(gè)頁(yè)面的布局。

Falcon所使用的AdminLTE本身是一個(gè)很典型的中后臺(tái)布局醉箕，如下圖所示

DingTalk20170606203910.png

其包含：頂部導(dǎo)航欄钾腺，側(cè)邊導(dǎo)航欄徙垫，頁(yè)面標(biāo)題區(qū)（含面包屑導(dǎo)航），警示欄區(qū)（通常隱藏）放棒，內(nèi)容區(qū)和底部區(qū)姻报。

所以我們首先定義好這個(gè)Layout頁(yè)面，和公共的5個(gè)組件

1. 頂部導(dǎo)航欄：NavBar
2. 側(cè)邊導(dǎo)航欄：SideBar
3. 頁(yè)面標(biāo)題區(qū)：ContentHeader
4. 警示欄區(qū)：Alert
5. 底部區(qū)：ContentFooter

由于內(nèi)容區(qū)的具體呈現(xiàn)是由各個(gè)業(yè)務(wù)頁(yè)面來(lái)決定的间螟，所以我們?cè)贚ayout里使用router-view預(yù)留出來(lái)一個(gè)位置吴旋，等待具體頁(yè)面來(lái)填充。

<template>
  <div class="skin-blue sidebar-mini wysihtml5-supported">
    <nav-bar></nav-bar>
    <side-bar></side-bar>
    <div class="content-wrapper" style="min-height: 916px;">
      <content-header></content-header>
      <alert></alert>
      <div class="content">
        <router-view></router-view>
      </div>
    </div>
    <content-footer></content-footer>
  </div>
</template>

<script>
  import NavBar from '@/components/global/NavBar'
  import SideBar from '@/components/global/SideBar'
  import ContentHeader from '@/components/global/ContentHeader'
  import ContentFooter from '@/components/global/ContentFooter'
  import Alert from '@/components/global/Alert'

  export default {components: {SideBar, NavBar, ContentHeader, ContentFooter, Alert}}
</script>

Vue路由

由于其它頁(yè)面都套用Layout這個(gè)布局模板厢破，所以Layout本身就放在路由的第一級(jí)荣瑟，其它業(yè)務(wù)頁(yè)面都作為L(zhǎng)ayout的Children，這樣定義在Children中的組件將會(huì)填充在Layout中定義的router-view摩泪。

const router = new Router({
  routes: [{
      path: '/',
      name: 'root',
      component: Layout,
      redirect: '/dashboard',
      children: [{
        path: 'dashboard',
        name: 'dashboard',
        component: Dashboard
      }, {
        path: 'job',
        name: 'job',
        component: Job
      }, ...]
    }]
})

同理笆焰，如果是一個(gè)完全不同的布局，那么可以單獨(dú)進(jìn)行頁(yè)面的定義见坑，和Layout放在同一級(jí)別嚷掠。

比如：登錄頁(yè)面

DingTalk20170607202352.png

對(duì)應(yīng)的路由定義如下：

const router = new Router({
  routes: [
    {
      path: '/login',
      name: 'login',
      component: Login
    },
    {
      path: '/',
      name: 'root',
      component: Layout,
      redirect: '/dashboard',
      children: [{
        path: 'dashboard',
        name: 'dashboard',
        component: Dashboard
      }, ...]
    }]
})

總結(jié)

總結(jié)下來(lái)就是：

1. 多頁(yè)面公用一套布局模板A，那么首先編寫這個(gè)A荞驴，然后在路由中進(jìn)行定義A
2. 這幾個(gè)頁(yè)面的非公用部分則定義為不同的組件不皆，然后在路由中配置為模板A的Children。

關(guān)于組件和路由完整的例子在此:
https://github.com/thierryxing/Falcon/blob/master/src/views/Layout.vue
https://github.com/thierryxing/Falcon/blob/master/src/router/index.js