当我们进入主页时，加载了哪些组件

首先我们的组件都是挂载到App.vue上,根据路由的不同,显示不同的组件,一般人资管理后台都是两个一级路由,登录页login和具体内容页Layout,已经若干个二级路由或三级路由组成

<template>
  <div id="app">
    <router-view />
  </div>
</template>

 以Layout为例来展开使用的组件

抛开验证token及路由拦截来讲,当打开初始网页 / 时显示Layout组件

 而Layout组件在上方通过import 引入 layout文件下的index.vue

import Layout from '@/layout'

而在其index.vue文件中我们可以看到应用了三个模板组件Navbar, Sidebar, AppMain 分别是头部,侧边栏和main主体部分

<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>
.....
import { Navbar, Sidebar, AppMain } from './components'
.....
  components: {
    Navbar,
    Sidebar,
    AppMain
  },

先说说Navbar 导航栏

<div class="navbar">
    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
    <breadcrumb class="breadcrumb-container" />\
    <div class="right-menu">
      <el-dropdown class="avatar-container" trigger="click">
...
      </el-dropdown>
    </div>

 可以看到他引入了 hamburger和breadcrumb 组件,以及多个element组件

在说说Sidebar侧边栏

 引入了两个自定义组件Logo,SidebarItem和多个element组件

最后在看看的AppMain主题部分

 可以看到AppMain最为简单,因为它只有一个router-view 但是该位置却是二级路由的位置,每一个二级路由都是在该位置进行切换

每个二级路由组件 编写各自的代码,实现各自的功能