当我们进入页面的时候，加载的组件有哪些

最新推荐文章于 2022-06-14 11:33:47 发布

原创最新推荐文章于 2022-06-14 11:33:47 发布 · 239 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #html5 #node.js

本文详细介绍了Vue.js中组件的挂载过程，特别是如何在App.vue上挂载，并以Layout组件为例，展示了如何根据路由动态显示不同组件。在Layout组件的index.vue文件中，组件分为Navbar、Sidebar和AppMain三大部分，分别对应头部、侧边栏和主要内容区域，实现了基于路由的页面布局管理。

1.这是展示最大加载的组件

1.1首先我们的组件都是挂载到App.vue上

1.2然后就是以Layout为例来展开使用的组件

1.这是展示最大加载的组件

1.1首先我们的组件都是挂载到App.vue上

根据路由的不同,显示不同的组件,一般人资管理后台都是两个一级路由,登录页login和具体内容页Layout,已经若干个二级路由或三级路由组成

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

1.2然后就是以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
  },