当我们进入首页的时候都是先挂载在App.vue主组件上,显示不同的组件
一般的人资管理后台都是两个一级路由,分别是Login登录页和Layout具体内容页,和若干个二级路由和三级路由组成。
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
我们以首页Layout为例来开展使用的组件:
从layout文件夹下的index.vue组件中我们可以看到三个模板组件:
Navbar、Sidebar 、AppMain
分别是头部(Navbar)、侧边栏(Sidebar)、主体部分(AppMain)
<template>
<div :class="classObj" class="app-wrapper">
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
<sidebar class="sidebar-container" /> <!-- 侧边栏部分 -->
<div class="main-container">
<div :class="{'fixed-header':fixedHeader}">
<navbar /> <!-- 头部部分 -->
</div>
<app-main /> <!-- 主体部分 -->
</div>
</div>
</template>
<script>
import { Navbar, Sidebar, AppMain } from './components'
import ResizeMixin from './mixin/ResizeHandler'
export default {
name: 'Layout',
components: {
Navbar,
Sidebar,
AppMain
},
}
</script>
Navbar头部导航栏组件
<template>
<div class="navbar">
<hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
<breadcrumb class="breadcrumb-container" />
<el-dropdown >
... ...其余代码
</el-dropdown>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
export default {
components: {
Breadcrumb,
Hamburger
},
}
</script>
以上代码可以看出头部导航栏引入了hamburger和breadcrumb组件,以及多个 element组件
在Sidebar侧边栏中
<template>
<div :class="{'has-logo':showLogo}">
<logo v-if="showLogo" :collapse="isCollapse" />
<el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu
:default-active="activeMenu"
:collapse="isCollapse"
:background-color="variables.menuBg"
:text-color="variables.menuText"
:unique-opened="false"
:active-text-color="variables.menuActiveText"
:collapse-transition="false"
mode="vertical"
>
<sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
</el-menu>
</el-scrollbar>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import Logo from './Logo'
import SidebarItem from './SidebarItem'
import variables from '@/styles/variables.scss'
... ... 等代码
在侧边栏组件中可以看出,他引用了Logo 、SidebarItem和多个element组件
其中,SidebarItem.vue组件中还引用了item和link 两个小组件,由于组件太细致我就不过多介绍了
在主内容部分
<template>
<section class="app-main">
<transition name="fade-transform" mode="out-in">
<router-view :key="key" />
</transition>
</section>
</template>
以上代码中可以看出,该组件特别简单,它只有一个路由挂载点<router-view :key="key" />
但这个路由挂载点却是挂载着许许多多的二级路由,每一个二级路由都可以在这个挂载点进行切换,每个二级路由组件都可以实现各自的功能,共同搭建出一个完美的页面