Vue组件

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

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

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

DingTalk20170606203910.png

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

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

顶部导航栏：NavBar
侧边导航栏：SideBar
页面标题区：ContentHeader
警示栏区：Alert
底部区：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
      }, ...]
    }]
})