vue+element-ui实现后台管理可伸缩导航栏布局

先看一下效果吧

这个是伸

 这个是缩

要想实现效果，当然首先是搭建项目啦

搭建vue脚手架

首先是我的页面结构

Content.vue是我的右侧内容布局

Mymenu.vue是我的左侧导航布局

zongNav.vue则是整合Content.vue和Mymenu.vue组件

Mymenu.vue（左侧导航）

<template>
<!-- left -->
    <div>
        <!-- 是 default-active="/" 的情况下，刷新后效果会刷新到第一个项但样式不会变 -->
        <!-- 改成:default-active="$router.path" 刷新后内容在那个地址，导航样式就会在那个项 -->
        <el-menu
        :default-active="$router.path"
        class="el-menu-vertical-demo"
        background-color="#55499c"
        text-color="#fff"
        active-text-color="#409EFF"
        router
        :collapse='isCollapse'
        >
        <!-- 加入router才可以使标签有切换路由的作用  index中是自己配置的路由 -->