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>
<script>
import Header from "@/components/header/Header.vue"; //  Header放到components文件夹里面  这里面不用写    路由    直接挂载到首页即可
import menus from "@/components/menus/menus.vue"; //  menus放到components文件夹里面  这里面不用写    路由    直接挂载到首页即可
export default {
  components: {
    Header, //   顶部栏     挂载到首页，就是这个页面
    menus, //   左侧栏     挂载到首页，就是这个页面
  },
  provide() {
    return {};
  },
  data() {
    return {
      // ~~~~~~打开左侧栏状态
      isCollapse: false,
    };
  },
  methods: {
    // ~~~
    Collapse() {
      this.isCollapse = !this.isCollapse;
    },
  },
  computed: {
    // ~~~可加可不加	 src文件夹下 找到store状态管理里面的js文件里面加这个属性		state: { isCollapse: false,}
    asideWidth() {
      return this.$store.state.isCollapse ? "auto" : "200px";
    },
  },
};
</script>

顶部栏header.vue

<template>
  <div class="box">
    <el-row :gutter="20">
      <el-col :span="8">
        <div>
          <!-- 要按照 npm i element-ui -S  才可以看到图标或者用img下载自己想要的图片  ~~~ -->
          <i
            :class="isCollapse ? 'el-icon-s-fold' : 'el-icon-s-unfold'"
            @click="Collapse"
          ></i>
          <span>{{ name }}</span>
        </div>
      </el-col>
      <el-col :span="8"> </el-col>
      <el-col :span="8"> </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "点击",
      // ~~~
      isCollapse: false,
    };
  },
  methods: {
    // ~~~
    Collapse() {
      this.isCollapse = !this.isCollapse;
      this.$emit("Collapse");
    },
  },
};
</script>

侧边栏menus.vue

<template>
  <el-menu
    class="menu-nav"
    router
    :default-active="this.$router.path"
    :collapse="isCollapse">
     <!-- ~~~必须要的属性是否开启折叠el-menu :collapse="isCollapse" -->
  </el-menu>
</template>

<script>
export default {
  // ~~~
  props: ['isCollapse'],
}
</script>

最后这个效果