001_连通页面组件(h3)
- \src\views\Student\Home\Home.vue
<template>
<div>
home
</div>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped></style>
-
\src\views\Student\Appointment\Appointment.vue
-
\src\views\Student\Other\PageOne.vue
-
\src\views\Student\Task\Task.vue
-
\src\router\index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Student/Login.vue'
import Register from '../views/Student/Register.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
//name: 'home',
//按需加载
component: () => import('@/views/Student/Main.vue'),
children: [
{
path: '/home',
name: 'home',
component: () => import('@/views/Student/Home/Home.vue')
},
{
path: '/task',
name: 'task',
component: () => import('@/views/Student/Task/Task.vue')
},
{
path: '/appointment',
name: 'appointment',
component: () => import('@/views/Student/Appointment/Appointment.vue')
},
{
path: '/page1',
name: 'page1',
component: () => import('@/views/Student/Other/PageOne.vue')
}
]
},
{
path: '/login',
name: 'login',
component: Login
},
{
path: '/register',
name: 'register',
component: Register
}
]
const router = new VueRouter({
routes
})
export default router
- \src\views\Student\Main.vue
<template>
<el-container style="height: 100%">
<el-aside><common-aside></common-aside></el-aside>
<el-container>
<el-header><common-header></common-header></el-header>
<common-tab></common-tab>
<el-main> <router-view /> </el-main>
</el-container>
</el-container>
</template>
<script>
//引入组件
import CommonHeader from '../../components/CommonHeader'
import CommonAside from '../../components/CommonAside'
import CommonTab from '../../components/CommonTab'
export default {
// /注册组件
components: {
CommonHeader,
CommonAside,
CommonTab
}
}
</script>
<style lang="scss" scoped>
.el-header {
background-color: #333;
}
</style>
- \src\components\CommonAside.vue
<template>
<el-menu default-active="2" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
<!-- 无子级菜单-->
<el-menu-item :index="item.path" v-for="item in noChildren" :key="item.path" @click="clickMenu(item)">
<i :class="'el-icon-' + item.icon"></i>
<span slot="title">{{ item.label }}</span>
</el-menu-item>
<!-- 有子级菜单-->
<el-submenu index="2" v-for="(item, index) in hasChildren" :key="index">
<template slot="title">
<i :class="'el-icon-' + item.icon"></i>
<span>{{ item.label }}</span>
</template>
<el-menu-item-group>
<el-menu-item index="subItem.path" v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="clickMenu(subItem)">
<i :class="'el-icon-' + subItem.icon"></i>
<span>{{ subItem.label }}</span>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</template>
<script>
export default {
computed: {
noChildren() {
return this.asideMenu.filter(item => !item.children)
},
hasChildren() {
return this.asideMenu.filter(item => item.children)
}
},
data() {
//返回一个数组,通过数组的方式循环渲染出来
return {
asideMenu: [
{
path: '/',
name: 'home',
label: '首页',
icon: 's-home'
},
{
path: '/task',
name: 'task',
label: '试验任务',
icon: 'document'
},
{
path: '/appointment',
name: 'appointment',
label: '实验预约',
icon: 'date'
},
{
label: '其他',
icon: 'user',
children: [
{
path: '/page1',
name: 'page1',
label: '页面1',
icon: 'setting'
}
]
}
]
}
},
methods: {
clickMenu(item, path) {
//this.$route.path是当前路径 规避重复跳转
if (path !== this.$route.path) {
this.$router.push({ name: item.name })
}
this.$store.commit('selectMenu', item)
}
}
}
</script>
<style lang="scss" scoped>
.el-menu {
//使侧边栏占满屏幕高度
height: 100%;
border: none;
}
</style>
- \src\components\CommonTab.vue
<template>
<div class="tabs">
<el-tag
type="info"
:key="tag.name"
v-for="tag in tags"
:closable="tag.name !== 'home'"
:disable-transitions="false"
@close="handleClose(tag)"
@click="changeMenu(tag)"
>
{{ tag.label }}
</el-tag>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
computed: {
...mapState({
tags: state => state.tab.tabsList
})
},
data() {
return {
dynamicTags: ['标签一', '标签二', '标签三'],
inputVisible: false,
inputValue: ''
}
},
methods: {
...mapMutations({
close: 'closeTab'
}),
handleClose(tag) {
//this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
this.close(tag)
},
changeMenu(item) {
this.$router.push({ name: item.name })
this.$store.commit('selectMenu', item)
}
}
}
</script>
<style lang="scss" scoped>
.tabs {
padding: 20px;
.el-tag {
margin-right: 15px;
cursor: pointer;
}
}
</style>
- 浏览器界面