main.vue

<style lang="less"></style>
<template>
    <!--软件主体部分-->
    <div class="d-box-v">
        <header>
            <header-box :title-width="navWidth" :breadcrumb="breadcrumb">
                <!-- 头部会员登录等信息 -->
                <slot name="headerInfo"></slot>
            </header-box>
        </header>
        <div class="d-box-flex d-box">
            <nav class="d-box">
                <nav-box @on-select="onSelect" :nav-config="navConfig" :active-name="navActiveName"
                    :open-names="openNames" :accordion="accordion" :width="navWidth">
                </nav-box>
            </nav>
            <main class="d-box-flex-1 d-box-v">
                <nav-sub :nav-config="navConfig" :active-name="navActiveName"></nav-sub>
                <div class="d-box-flex" style="overflow:auto;">
                    <router-view></router-view>
                </div>
            </main>
        </div>
    </div>
</template>
<script type="text/javascript">
import headerBox from './header.vue';
import navBox from './nav.vue';
import navSub from './navSub.vue';
export default {
    props: {
        navConfig: {
            type: Array,
            default() {
                return [];
            }
        },
        activeName: {
            type: String,
            default: '0-0'
        },
        accordion: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            navActiveName: '0-0',
            openNames: ['0', '1'],
            navWidth: '200px',
            //面包屑
            breadcrumb: []
        };
    },
    components: { navBox, navSub, headerBox },
    methods: {
        onSelect(name) {
            this.navActiveName = name;
        },
        setNavActive() {
            var path = this.$route.path;
            //循环一级
            for (var x = 0; x < this.navConfig.length; x++) {
                let item = this.navConfig[x];
                if (path == item.to) {
                    this.navActiveName = x.toString();
                    this.openNames = [x.toString()];
                    this.breadcrumb = [{ to: item.to, title: item.title }];
                    // console.log(this.breadcrumb);
                    return;
                }
                //循环二级
                for (var y = 0; y < item.children.length; y++) {
                    let item2 = item.children[y];
                    if (path == item2.to) {
                        this.navActiveName = x + '-' + y;
                        this.openNames.length = 0;
                        this.openNames.push(x.toString());
                        this.openNames.push(x + '-' + y);
                        this.breadcrumb = [
                            { to: item.to, title: item.title },
                            { to: item2.to, title: item2.title }
                        ];
                        // console.log(this.breadcrumb);
                        return;
                    }
                    //循环三级
                    if (item2.children) {
                        for (var z = 0; z < this.navConfig[x].children[y].children.length; z++) {
                            let item3 = item2.children[z];
                            if (path == item3.to) {
                                this.navActiveName = x + '-' + y;
                                //只保留一二级
                                this.openNames = [x.toString(), x + '-' + y];
                                this.breadcrumb = [
                                    { to: item.to, title: item.title },
                                    { to: item2.to, title: item2.title }
                                ];
                                // console.log(this.breadcrumb);
                                return;
                            }
                        }
                    }
                }
            }
        }
    },
    created: function () {
        this.setNavActive();
    },
    watch: {
        '$route.path'() {
            this.setNavActive();
        }
    },
    mounted: function () {
        // console.log(this.accordion);
    },
    //计算属性
    computed: {}
};
</script>