本文是Vue实战系列的第四篇文章，主要介绍Falcon项目本身的布局结构和路由。
Falcon项目地址：https://github.com/thierryxing/Falcon

Vue组件

Vue其中的一个重要思想就是：一切皆组件，一切皆由组件构成。

按照这个思想，我们在拿到一个页面后，第一件事需要像庖丁解牛一样将其分割成不同的组件，然后由这些组件构成整个页面的布局。

Falcon所使用的AdminLTE本身是一个很典型的中后台布局，如下图所示

DingTalk20170606203910.png

其包含：顶部导航栏，侧边导航栏，页面标题区（含面包屑导航），警示栏区（通常隐藏），内容区和底部区。

所以我们首先定义好这个Layout页面，和公共的5个组件

1. 顶部导航栏：NavBar
2. 侧边导航栏：SideBar
3. 页面标题区：ContentHeader
4. 警示栏区：Alert
5. 底部区：ContentFooter

由于内容区的具体呈现是由各个业务页面来决定的，所以我们在Layout里使用router-view预留出来一个位置，等待具体页面来填充。

<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路由

由于其它页面都套用Layout这个布局模板，所以Layout本身就放在路由的第一级，其它业务页面都作为Layout的Children，这样定义在Children中的组件将会填充在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
      }, ...]
    }]
})

同理，如果是一个完全不同的布局，那么可以单独进行页面的定义，和Layout放在同一级别。

比如：登录页面

DingTalk20170607202352.png

对应的路由定义如下：

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
      }, ...]
    }]
})

总结

总结下来就是：

1. 多页面公用一套布局模板A，那么首先编写这个A，然后在路由中进行定义A
2. 这几个页面的非公用部分则定义为不同的组件，然后在路由中配置为模板A的Children。

关于组件和路由完整的例子在此:
https://github.com/thierryxing/Falcon/blob/master/src/views/Layout.vue
https://github.com/thierryxing/Falcon/blob/master/src/router/index.js