vue+饿了么 后台管理 布局

name: ‘login’,

component: ()=> import(‘…/components/login/login.vue’),

hidden: true //在导航栏不显示 作为参数传过去控制

},

{

path: ‘/demo’,

name: ‘单独点击’,

leaf: true, //只有一个节点 点击即跳转

component: ()=> import(‘…/components/home/home.vue’),

iconCls: ‘el-icon-s-home’,

children: [

{ path: ‘/demo2’, component: demo, name: ‘单独的’ },

]

},

{

path: ‘/account’,

name: ‘账号管理’,

component: ()=> import(‘…/components/home/home.vue’), //布局页面

children: [ //其他导航只跳转children

{

path: ‘/staff’,

name: ‘员工管理’, //通过name值传递渲染侧边导航和面包屑

iconCls: ‘el-icon-s-grid menumedia’, //icon图标

component: ()=> import(‘…/components/view/account/staff.vue’),

},

{

path: ‘/user’,

name: ‘用户管理’,

iconCls: ‘el-icon-s-grid menumedia’,

component: ()=> import(‘…/components/view/account/user.vue’),

},

]

},

{

path: ‘/operation’,

name: ‘运营管理’,

component: ()=> import(‘…/components/home/home.vue’), //布局页面

children: [

{

path: ‘/subsidy’,

name: ‘政策补贴’,

iconCls: ‘el-icon-s-grid menumedia’,

component: ()=> import(‘…/components/view/operation/operation.vue’),

},

]

},

]

})

login.vue登录页面

<el-form

:model=“ruleForm2” :rules=“rules2”

status-icon

ref=“ruleForm2”

label-position=“left”

label-width=“0px”

class=“demo-ruleForm login-page”>

系统登录

<el-input type=“text”

v-model=“ruleForm2.username”

auto-complete=“off”

placeholder=“用户名”

<el-input type=“password”

v-model=“ruleForm2.password”

auto-complete=“off”

placeholder=“密码”

<el-checkbox

v-model=“checked”

class=“rememberme”

记住密码

<el-button type=“primary” style=“width:100%;” @click=“handleSubmit” :loading=“logining”>登录

home.vue布局页面

我来照顾运营管理平台

<el-menu :default-active=“$route.path”

class=“el-menu-vertical-demo”

unique-opened router

@open=“handleOpen”

v-if=“!isCollapse”

:collapse=“isCollapse”

:class=“{‘isCollapseFalseStyle’:isCollapse!=true}”>

<span slot=“title” :class=“{‘navName’: isActive == item.path}” @click=“clickname(item.path)”>{{item.name}}

<el-menu-item v-for=“child in item.children” :index=“child.path” :key=“child.path”

v-if=“!child.hidden”>{{child.name}}

{{item.children[0].name}}

<i :class=“[isCollapse==false?‘el-icon-s-fold’:‘el-icon-s-unfold’]” @click=“changeMenu”>

{{item.name}}