当我们打开首页时，加载了哪些组件

当我们进入首页的时候都是先挂载在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" />

        但这个路由挂载点却是挂载着许许多多的二级路由，每一个二级路由都可以在这个挂载点进行切换，每个二级路由组件都可以实现各自的功能，共同搭建出一个完美的页面