vue管理后台

手摸手，带你用vue撸后台 系列四(vueAdmin 一个极简的后台基础模板)基于这篇文章的学习，开始动手写了一个简易的vue管理后台。主要页面如下
登录

主页 （页面的结构基本和主页相同。左侧导航栏，右侧上方面包屑导航和用户头像，右侧下方大块空白区域对应的是各路由）

项目结构

views:各业务组件components:公共组件(面包屑,导航开关等等）api: 请求的js文件icons: svg和相关配置文件（此项目的图标是使用svg-sprite-loader来实现的， 之前写过的相关文章链接permission.js 检查权限其他地方与别的项目结构一致，我就不再赘述了。
1.实现页面的结构。
（因为除了login等特殊页面外,其他的结构都是一致的。所以可以用Layout组件来承载页面的结构）@/views/Layout/的目录结构如下

对应到Layout的各个区域如下图。

@/router/index.js 路由器。
当点击切换路由时，sidebar和navbar不会改变，只有app-main组件的内容会改变。实现思路:左侧导航栏的路由的component为Layout,再通过router的redirect属性控制显示app-main区域的路由。部分代码如下
@/Layout/Layout.vue
<template>
<div class=”app-wrapper” :class=”classObj”>
<!–导航 –>
<sidebar/>
<!–面包屑–>
<div class=”main-container”>
<!– 头部导航 –>
<navbar/>
<!– 二级路由 –>
<app-main/>
</div>
</div>
</template>
<script>
import Sidebar from ‘./components/Sidebar’
import Navbar from ‘./components/navbar’
import AppMain from ‘./components/AppMain’
</script>
@/Layou/components/AppMain.vue
<template>
<section class=”app-main”>
<transition name=”fade-transform” mode=”out-in”>
<!– 在这里映射不同的路由到Layout中的app-main –>
<router-view/>
</transition>
</section>
</template>
2.左侧导航
左侧的导航是通过element-ui的 el-menu组件和循环路由表来实现的。具体效果如下图
如果没有子路由，点击直接跳转。有则出现下拉弹框。
3.面包屑导航
使用的也是element-ui里的el-breadcrumb组件
…..未完待续…..