后台管理左侧导航栏引入设置

js配置

const adminMenu = [
	{
	//一级菜单
		name: '管理',
		icon: 'iconshuju1',
		//二级菜单
		children: [
			{
				name: '导入',
				path: '这里写router文件下的路由配置path'
			}, 
			{
				name: '管理',
				path: ''
			}
		]
	},
	 {
		name: '管理',
		icon: 'iconshuju1',
		children: [
			{
				name: '管理',
				path: ''
			},
			{
				name: '管理',
				path: ''
			}
		]
	},
  {
		name: '管理',
		icon: 'iconshuju-2',
		children: [
			{
				name: '审核',
				path: ''
			},
			{
				name: '审核',
				path: ''
			}
		]
	},
  {
		name: '统计分析',
		icon: 'iconshuju3',
		children: [
			{
				name: '统计分析',
				path: ''
			}
		]
	},
]

export {
  adminMenu
}

菜单vue界面配置

<template>
    <div class="menu-wrapper">
        <ul class="sys-menu">
            <li v-for="(item, index) in sysMenu" :key="index" :class="{ active: activeAllId === index }"
                @click="toggleActive(item, index)">
                <router-link :to="item.path" v-if="item.path">
                    <i :class="['iconfont', item.icon]"></i>
                    {{ item.name }}
                    <div :class="[activeId === index ? 'opened' : '', 'right-icon']"></div>
                </router-link>
                <a v-else>
                    <i :class="['iconfont', item.icon]"></i>
                    {{ item.name }}
                    <div :class="[activeId === index ? 'opened' : '', 'right-icon']"></div>
                </a>
                <!-- 二级菜单 -->
                <ul class="menu-child" v-if="item.children" :class="{ showChild: activeAllId === index }">
                    <li v-for="(child, i) in item.children" :key="i" @click.stop="toggleActiveChild(i)"
                        :class="[activeChildId === i ? 'active' : '', child.status === 0 ? 'blank-page-li' : '']">
                        <router-link :to="child.path">
                            <div class="child-icon"></div>
                            {{ child.name }}
                        </router-link>

                    </li>
                </ul>
            </li>
        </ul>
    </div>
</template>

<script>
import router from "@/router";
import { sysMenu } from "../../util/menu.js"
export default {
    name: "Menu",
    data() {
        return {
            sysMenu,
            activeId: -1,
            activeAllId: -1,
            activeChildId: -1
        };
    },
    methods: {
        // 一级菜单
        toggleActive(param, i) {
            if (param.path && this.activeId !== i) {
                this.activeId = i;
                this.activeAllId = -1;
            }
            else {
                let active = 0;
                if (this.activeAllId === i) {
                    this.activeAllId = -1
                }
                else {
                    this.toggleActiveChild(active, param.children[0]);
                    if (param.children.length !== 0) {
                        this.activeAllId = i;
                    }
                }
            }
        },
        // 二级菜单
        toggleActiveChild(i, path) {
            this.activeId = -1;
            this.activeChildId = i;
            if (path) {
                this.$router.replace(path.path);
            }
        },
        ss(path) {
            this.$router.replace(path);
        }
    },
    watch: {
        $route(newVal, oldVal) {
            console.log("newVal", newVal);
        }
    },
    mounted() {
        var path = this.$route.path
        this.sysMenu.forEach((name, index) => {
            // console.log(index, name);
            name.children.forEach((child, i) => {
                if (child.path === path) {
                    this.activeAllId = index;
                    this.activeChildId = i
                }
                // console.log(child, i);
            })
        })
        // this.activeAllId = 1;
        // this.activeChildId = 1
        // console.log(this.sysMenu);
        // console.log("路由输出", window.location.href, this.$route.path);
    },
    components: { router }
}
</script>
<style scoped>
.menu-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

/* 一级菜单 */
.sys-menu {
    width: 100%;
    height: 100%;
    background-color: transparent;
    box-sizing: border-box;
    color: white;
    font-size: 16px;
    font-weight: 400;
    font-family: Source Han Sans CN;
    padding-left: 0;
    padding-bottom: 0;
    position: absolute;
    text-align: left;
    overflow-x: hidden;
    overflow-y: auto;
}

.sys-menu>li {
    cursor: pointer;
    display: block;
}

.right-icon {
    float: right;
    margin-right: 20px;
    margin-top: 26px;
    transition-duration: 0.4s;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 8px solid #fff;
}

.sys-menu>.active>a>.right-icon {
    transform: rotate(90deg);
}

.sys-menu>li>a {
    box-sizing: border-box;
    width: 100%;
    height: 60px;
    color: white;
    display: block;
    line-height: 60px;
    padding-left: 20px;
    text-decoration: none;
}

/* 二级菜单 */
.menu-child {
    display: none;
    font-size: 14px;
    font-family: Source Han Sans CN;
    transition-duration: 0.3s;
    padding-bottom: 15px;
    padding-left: 0;
}

.menu-child>li.active {
    background-color: rgba(255, 255, 55, 0.14);
}

.child-icon {
    width: 6px;
    height: 6px;
    background-color: #fff;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

.menu-child>li>a {
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: #fff;
    box-sizing: border-box;
    display: inline-block;
    text-decoration: none;
    padding-left: 44px;
}

.showChild {
    display: block;
}

.blank-page-li>a {
    color: #c0c0c0 !important;
}
</style>