vue + el-menu 动态加载 一二级菜单 侧边栏

1.HTML

<template>
    <div class="container">
        <div class="top">上</div>

        <div class="main">
            <!-- 动态加载侧边栏  首先分为可折叠的 不可折叠的   -->
            <div class="left">
                <!-- default-active 默认激活第一个  unique-opened 是否只需要展示一个菜单  router 开启路由跳转 对应的是 el-submenu 上绑定的index-->
                <el-menu :default-active="active" unique-opened router class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                    background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                    <!-- 由于需要依次循环不同的数据格式 在外层加上一个div  -->
                    <div v-for="item in treeList" :key="item.id">
                        <!-- { id: '1', icon: 'el-icon-eleme', name: '导航1', children: [{ id: '1-1', name: '导航1-1' }, { id: '1-2', name: '导航1-2' }] }, -->
                        <el-submenu :index="item.id" v-if="item.children">
                            <template slot="title">
                                <i :class="item.icon"></i>
                                <span>{{ item.name }}</span>
                            </template>
                            <!-- 这里循环的就是 children 里面的数据 -->
                            <el-menu-item :index="val.id" v-for="val in item.children" :key="val.id">{{val.name}}</el-menu-item>
                        </el-submenu>
                        <!-- { id: '6', icon: 'el-icon-loading', name: '导航6' }, -->
                        <!-- 这里循环的就是我们的单个数据 -->
                        <el-menu-item :index="item.id" v-else>
                            <i :class="item.icon"></i>
                            <span slot="title">选项22</span>
                        </el-menu-item>
                    </div>
                </el-menu>
            </div>

            <!-- 这里是路由 -->
            <div class="right">
                <router-view />
            </div>
        </div>

    </div>
</template>

　　2. JS

<script>

export default {
    name: 'IndexView',
    data() {
        return {
            active:'home',
            treeList: [
                //默认加载home页面 
                { id: 'home', icon: 'el-icon-video-camera-solid', name: '导航1' },
                { id: '2', icon: 'el-icon-eleme', name: '导航2', children: [{ id: '2', name: '导航2-1' }, { id: 'playmuisc', name: '导航2-2' }] },
                { id: '3', icon: 'el-icon-video-camera-solid', name: '导航3' },
                { id: '4', icon: 'el-icon-s-promotion', name: '导航4' },
                { id: '5', icon: 'el-icon-eleme', name: '导航5', children: [{ id: '5-1', name: '导航5-1' }, { id: '4-2', name: '导航5-2' }] },
                { id: '6', icon: 'el-icon-bottom-left', name: '导航6' },
                { id: '7', icon: 'el-icon-loading', name: '导航7' },
            ]
        }
    },
    created(){
        // 刷新后保留在当前路由  使用字符串截取当前二级路由 赋值给当前的激活索引
        console.log(location.hash.substring(location.hash.lastIndexOf('/')+1))

        this.active=location.hash.substring(location.hash.lastIndexOf('/')+1)
    },
    mounted() {

    },
    methods: {

        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }

    }

}
</script>

　　3.当前页面自己的Css （用了less预编译） 

<style lang="less">
.container {
    height: 100%;
    width: 100%;

    .top {
        height: 8%;
        width: 100%;
    }

    .main {
        height: 92%;
        width: 100%;
        display: flex;
        align-items: center;

        .left {
            height: 100%;
        }
        .right {
            height: 100%;
        }
    }
}
</style>

　　效果： treeList 就是模拟后端返回数据