基于iview的后台管理模板布局页面

代码，在线预览

最近项目使用iview来开发，iview UI设计还是蛮好的相对于element-ui，但是后台模板布局是块硬伤，所以自己写了一个通用页面，以便以后可以直接拿来用，下面贴上代码，分享一下：
view admin的后台管理系统模板，但是个人愚见感觉有点太重了，所以自己结合iview的页面布局自己写了一套通用的模板页面，方便后续开发使用。

首先，我们新建一个Layout.vue页面，这个页面就是整个布局模板的页面，我们设置好sidebar、topbar、以及中间的content就好，然后content，我们放上就可以了，路由就随便你怎么跳转了。

Layout.vue

在路由页面里面，我引入了几个页面，你们可以根据我的路径自己新建一下即可，然后把组件和路由结合起来就可以成功运行并应用我的Layout.vue页面进行后台整个页面的布局了，是不是超方便的。

Router.vue

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/admin/Home.vue'
import AdminLayout from '@/components/admin/Layout.vue'
import Admin from '@/views/admin/Admin.vue'
import UserManage from '@/views/admin/UserManage.vue'
import CityManage from '@/views/admin/CityManage.vue'
import ConditionManage from '@/views/admin/ConditionManage.vue'
import ConditionTypeManage from '@/views/admin/ConditionTypeManage.vue'
import IndustryManage from '@/views/admin/IndustryManage.vue'
import Setting from '@/views/admin/Setting.vue'
import Notice from '@/views/admin/Notice.vue'

import Login from '@/views/login/Login.vue'

Vue.use(Router)

let router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'admin',
      component: AdminLayout,
      children:[
        {
          path:'',
          name:'index',
          meta:{
            title:'首页',
          },
          component:Admin
        },        
        {
          path:'usermanage',
          name:'user-manage',
          meta:{
            title:'用户管理',
          },
          component:UserManage
        },
        {
          path:'citymanage',
          name:'citymanage',
          meta:{
            title:'城市管理'
          },
          component:CityManage
        },
        {
          path:'conditiontypemanage',
          name:'conditiontypemanage',
          meta:{
            title:'条件类型管理'
          },
          component:ConditionTypeManage
        },
        {
          path:'conditionmanage',
          name:'conditionmanage',
          meta:{
            title:'条件管理'
          },
          component:ConditionManage
        },
        {
          path:'industrymanage',
          name:'industrymanage',
          meta:{
            title:'一级行业'
          },
          component:IndustryManage
        },
        {
          path:'setting',
          name:'setting',
          meta:{
            title:'设置'
          },
          component:Setting
        },
        {
          path:'notice',
          name:'notice',
          meta:{
            title:'通知'
          },
          component:Notice
        },
        {
          path:'test',
          name:'test',
          meta:{
            title:'测试'
          },
          component:Setting
        }
      ]
    },
    {
      path:'/login',
      name:'login',
      meta:{
        title:'登录',
      },
      component:Login
    },
  ]
})


router.beforeEach((to, from, next) => {
  let token = localStorage.token;
  if(token && to.name != 'login'){
    next()
  }else if(token && to.name == 'login'){
    next('/');
  }else if(!token && to.name != 'login'){
    next('/login')
  }else{
    next()
  }
})

export default router;

最后，总结一下：其实网上有好多类似的模板管理页面，但是个人感觉一般，所以自己写了一个，相信在不久的将来这样的模板布局页面会越来越多的。

1、iview官网

---

以下内容是2018年12月14日更新