这两天把后台管理项目填充了不少，下面来说下在template的基础上改好的一个功能更加多样的后台管理模板。
首先就是可编辑的表格了，包括了基本的增删改查，每个数据内也可以进行编辑，这里在admin的基础上，做了一点修改，在表格前增加了选择框，这样就可以一次选择多条数据，批量删除。其次是一个简单的图片上传功能，这里只用了最基本的input框，没有用到其他组件，具体需求看项目，获取到图片后传给后台即可，在从后台拿到链接呈现在网页上。其次是一个富文本编辑框，后台管理中也经常用到，图标功能也搬运了，使用的echarts。
简单了解布局
除了个别页面如：login , 404, 401 等页面没有使用该layout。其他基本的页面都使用了layout布局，如果想有多种不同的layout只要在一级路由那里选择不同的layout组件就行。
一般情况下，增加或者修改页面只会影响 app-main这个主体区域。其它配置在 layout 中的内容如：侧边栏或者导航栏都是不会随着你主体页面变化而变化的。
app-main 外部包了一层 keep-alive 主要是为了缓存 <router-view> 的，配合页面的 tabs-view 标签导航使用。
介绍router-view
router-view的作用，写上router-view，等于页面会进入子路由，所有如果有三层路由，我们也要在二级路由的地方写上router-view，原则上有几级写几级。在这里基础的已经配置好。
路由的配置
//当设置 true 的时候该路由不会再侧边栏出现 如401，login等页面，或者如一些编辑页面/edit/1hidden:true// (默认 false)//当设置 noRedirect 的时候该路由在面包屑导航中不可被点击redirect:'noRedirect'//当你一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式--如组件页面//只有一个时，会将那个子路由当做根路由显示在侧边栏--如引导页面//若你想不管路由下面的 children 声明的个数都显示你的根路由//你可以设置 alwaysShow: true，这样它就会忽略之前定义的规则，一直显示根路由alwaysShow:truename:'router-name'//设定路由的名字，一定要填写不然使用<keep-alive>时会出现各种问题meta:{roles:['admin','editor']//设置该路由进入的权限，支持多个权限叠加title:'title'//设置该路由在侧边栏和面包屑中展示的名字icon:'svg-name'//设置该路由的图标noCache:true//如果设置为true，则不会被 <keep-alive> 缓存(默认 false)breadcrumb:false// 如果设置为false，则不会在breadcrumb面包屑中显示}
示例·
{path:'/permission',component:Layout,redirect:'/permission/index',//重定向地址，在面包屑中点击会重定向去的地址hidden:true,// 不在侧边栏线上alwaysShow:true,//一直显示根路由meta:{roles:['admin','editor']},//你可以在根路由设置权限，这样它下面所以的子路由都继承了这个权限children:[{path:'index',component:()=>import('permission/index'),name:'permission',meta:{title:'permission',icon:'lock',//图标role:['admin','editor'],//或者你可以给每一个子路由设置自己的权限noCache:true// 不会被 <keep-alive> 缓存}}]}
侧边栏配置
{path:'/components',//路径
component:Layout,//使用的是不是layout布局
name:'component-demo',//名字，注意一定要和页面的name相同
meta:{title:'components',icon:'component'},//名字，使用的图标
children:[{path:'tinymce',component:()=>import('components-demo/tinymce'),name:'tinymce-demo',meta:{title:'tinymce'}},{path:'markdown',component:()=>import('components-demo/markdown'),name:'markdown-demo',meta:{title:'markdown'}},]}
//子路由以及懒加载
1.新增页面：
首先在 @/router/index.js 中增加你需要添加的路由。
如：新增一个 excel 页面
{ path: '/excel', component: Layout, redirect: '/excel/export-excel', name: 'excel', meta: { title: 'excel', icon: 'excel' }}
这样就是创建了一个基于layout的一级路由，如果需要子路由，在它下面的 children 中添加子路由。
{ path: '/excel', component: Layout, redirect: '/excel/export-excel', name: 'excel', meta: { title: 'excel', icon: 'excel' }, children: [ { path: 'export-excel', component: ()=>import('excel/exportExcel'), name: 'exportExcel', meta: { title: 'exportExcel' } } ]}
这样就会出现
路由配置完后再view下面配置好页面，就可以根据具体的功能寻找需要的组建。
详细指导https://panjiachen.github.io/vue-element-admin-site/zh/guide/
