本文是Vue实战系列的第四篇文章,主要介绍Falcon项目本身的布局结构和路由。
Falcon项目地址:https://github.com/thierryxing/Falcon
Vue组件
Vue其中的一个重要思想就是:一切皆组件,一切皆由组件构成。
按照这个思想,我们在拿到一个页面后,第一件事需要像庖丁解牛一样将其分割成不同的组件,然后由这些组件构成整个页面的布局。
Falcon所使用的AdminLTE本身是一个很典型的中后台布局,如下图所示
其包含:顶部导航栏,侧边导航栏,页面标题区(含面包屑导航),警示栏区(通常隐藏),内容区和底部区。
所以我们首先定义好这个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放在同一级别。
比如:登录页面
对应的路由定义如下:
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
}, ...]
}]
})
总结
总结下来就是:
- 多页面公用一套布局模板A,那么首先编写这个A,然后在路由中进行定义A
- 这几个页面的非公用部分则定义为不同的组件,然后在路由中配置为模板A的Children。
关于组件和路由完整的例子在此:
https://github.com/thierryxing/Falcon/blob/master/src/views/Layout.vue
https://github.com/thierryxing/Falcon/blob/master/src/router/index.js