本项目目前结构如下
1、Login页面=》MainFrm页面=》MainFrm左部菜单,右边是显示区域可以切换子页面。
2、当点击左部菜单时,右边的子页面随着进行切换。
实现关键代码如下
1、修改router下的index.js
export default new Router({
routes: [
{
path: '/',
name: '登录',
component: Login
}
{
path: '/MainFrm',
name: '首页',
component: MainFrm,
children: [
{
path: '/StudentClass',
name: '班级',
component: StudentClass
},
{
path: '/Student',
name: '学生',
component: Student
}
]
}
]
})
2、在MainFrm中修改代码如下,a-layout为antdesign布局写法,a-menu为antdesign菜单。
<template>
<a-layout id="components-layout-demo-top-side-2">
<a-layout-header class="header" style="background: rgb(9, 154, 135);">
<div class="logo" style="background:url(/static/img/tigongshang.png)" />
<div style="float:right">
<a-avatar style="backgroundColor:#ffffff; color:#888888;" icon="user" />
<a-dropdown>
<a class="ant-dropdown-link" href="#" style="color:#ffffff;text-decoration: blink;">
管理员名称
<a-icon type="down"/>
</a>
<a-menu slot="overlay">
<a-menu-item>
<a href="javascript:;">修改密码</a>
</a-menu-item>
<a-menu-item>
<a href="javascript:;">退出登录</a>
</a-menu-item>
</a-menu>
</a-dropdown>
</div>
</a-layout-header>
<a-layout>
<a-layout-sider width="200" :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0, background: '#fff' }">
<a-menu mode="inline" :defaultSelectedKeys="['1']" :defaultOpenKeys="['sub2','sub3']" :style="{ height: '100%', borderRight: 0 }">
<a-menu-item key="1">
<a-icon type="home"/>
<span class="nav-text">班级</span>
<a-menu-item key="2" @click="menu('StudentClass')">班级</a-menu-item>
</a-menu-item>
<a-sub-menu key="sub2">
<span slot="title">
<a-icon type="database"/>学生
</span>
<a-menu-item key="2" @click="menu('Student')">学生</a-menu-item>
</a-sub-menu>
</a-menu>
</a-layout-sider>
<a-layout :style="{ marginLeft:'200px', padding:'24px 24px 0px' }">
<a-layout-content :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px', overflow: 'initial'}">
<router-view></router-view>
</a-layout-content>
</a-layout>
</a-layout>
</a-layout>
</template>
3、修改export default如下
export default {
name: 'MainFrm',
data () {
return {
collapsed: false,
page: Student
}
},
methods: {
menu (s) {
console.log(s)
this.$router.push(s)
}
}
}
这样点击左部菜单时,就可以自动在MainFrm中切换班级和学生了。