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

一.咋我在启动项目后可以通过浏览器查看都是先挂载在App.vue主组件上，显示不同的组件如图下图所示:

 一般来说人资后台都是两个一级路由，分别是Login登录页和Layout具体内容页，和若干个二级路由和三级路由组成。

<template>
  <div id="app">
    <router-view />
  </div>
</template>
 
<script>
export default {
  name: 'App'
}
</script>

{
  path: '/login',
  component: () => import('@/views/login/index'),
  hidden: true
},

{
  path: '/',
  component: Layout,
  redirect: '/dashboard',
  children: [{
    path: 'dashboard',
    name: 'Dashboard',
    component: () => import('@/views/dashboard/index'),
    meta: { title: 'Dashboard', icon: 'dashboard' }
  }]
},

二.我们以首页Layout为例来开展使用的组件

三.从layout文件夹下的index.vue组件中我们可以看到三个模板组件

 

 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组件

在主内容部分:

<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <router-view :key="key" />
    </transition>
  </section>
</template>

在主题部分它只有一个路由挂载点<router-view  />,这个路由挂载点却是挂载着许许多多的二级路由，每一个二级路由都可以在这个挂载点进行切换，每个二级路由组件都可以实现各自的功能，共同搭建出一个完美的页面