Vue项目点击侧边栏展开与折叠功能

注:带这个符号必须要有的~~~

路由配置:

{
  path: "/App",
  name: "App",
  component: () => import("../App.vue"),
}

首页App.vue

<template>
  <div id="app">
    <el-container>
      <el-header>
        <!-- 顶部栏 ~~~ -->
        <Header :name="name" @Collapse="Collapse"></Header>
      </el-header>
      <el-container>
        <!-- ~~~~ width默认200px 改一下不然固定宽度，不随缩进变化而变化 -->
        <el-aside width="asideWidth">
          <!-- 左侧栏 ~~~~~~~~~~~~~~~ Menu 有这个属性collapse是否开启折叠elementUI官网里面 -->
          <menus :isCollapse="isCollapse" />
        </el-aside>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
&