vue版本根据当前路由匹配到根父节点并且激活

<template>
    <el-container :data-theme=‘base_theme‘>
        <el-header>
            <div class="logo">
                <!-- <span><img class="sys_logo" :src="!!logData.logopath?logData.logopath:Images.logopath" /></span> -->
                <span><img class="sys_logo" :src="logSrc" /></span>
                <span class="sys_name">{{sysName}}</span>
            </div>

            <!-- <span class="lang" @click="switchLang">语言</span>
                <span class="theme" @click="switchTheme">切换主题</span> -->
            <div>
                <span class="el-icon-switch-button quit" @click="quit" title="退出"></span>
                <div id="h-navbar">
                    <ul class="navbar">
                        <li class="" v-for="(item, index) in menus" :key="item.id" :class="{active:active==index?true:false}" @click="switchTab(index)">
                            <i class="em">|</i>
                            <a href="javascript:;">{{item.name}}</span>
                            </a>
                        </li>
                        <!-- <li><i class="em">|</i><a href="javascript:;">能源统计与分析</a></li>-->
                    </ul>
                </div>
                
            </div>
            <!-- 功能按钮 -->
            <!-- <div id="h-icon">
                    <i :class="item.icon" :title="item.text" v-for="(item,index) in logData.oper" :key="item.text" v-if="item.type==‘icon‘"></i>
                    <i :class="item.icon" :title="item.text" v-else>{{item.text}}</i>
                </div> -->
        </el-header>
        <el-container>
            <el-aside width="200px">
                <left-bar :menuData="menuData" />
            </el-aside>
            <el-container>
                <el-main>
                    <!-- 路由 -->
                    <self-bread :options="breadOptions" v-if="$route.meta.treeType!=null"/>
                    <section class="app-main">
                        <transition name="fade" mode="out-in">
                            <router-view ref="routerview" />
                        </transition>
                    </section>
                </el-main>
                <!-- <el-footer>Footer</el-footer> -->
            </el-container>
        </el-container>
    </el-container>
</template>
<script>
import Menus from ‘@modules/baselayout/assets/json/menus.json‘
import SelfContrls from ‘@frameworks/common‘
import LeftBar from ‘./views/LeftBar‘
import options from ‘./assets/js/configIndex‘
import lockr from ‘lockr‘
import Api from ‘@frameworks/conf/api‘
export default {
    mixins: [options],
    name: ‘layout‘,
    components: {
        LeftBar
    },
    data() {
        return {
            menus: [],
            menuData: [],//传给leftbar的数据
            active: 0,
            parentNodes:[]
        }
    },
    methods: {
        //查找所有祖先节点
        findAllParent(node, tree, parentNodes = [], index = 0) {
            if (!node || node.pid === 0) {
                return
            }
            this.findParent(node, parentNodes, tree)
            let parentNode = parentNodes[index]
            this.findAllParent(parentNode, tree, parentNodes, ++index)
            return parentNodes
        },

        //查找父节点
        findParent(node, parentNodes, tree) {
            for (let i = 0; i < tree.length; i++) {
                let item = tree[i]
                if (item.id === node.pid) {
                    parentNodes.push(item)
                    return
                }
                if (item.children && item.children.length > 0) {
                    this.findParent(node, parentNodes, item.children)
                }
            }
        },

        //根据addressId查找对应的父节点及祖先节点
        getParentsByAddressId(addressInfos){
            //console.log(addressInfos)
            if(addressInfos.request){
                this.parentNodes = this.findAllParent(addressInfos, this.menus).reverse()
            }else{
                if(this.parentNodes[this.parentNodes.length-1].children.length>0){
                    this.parentNodes.push(addressInfos)
                }else{
                    this.parentNodes.splice(this.parentNodes.length-1,1,addressInfos) 
                }
            }
            //console.log(this.parentNodes)
        },
        init() {
            let menuData = lockr.get(‘menuData‘)
            let _menuData = menuData.filter((a)=>a.type == 0)
            this.menus = this.$_c.listToTree(_menuData, { idKey: ‘id‘, parentKey: ‘parent‘ })
            //根据缓存的浏览器一级菜单的id设置初始化选中菜单 设置this.active
            // this.active = lockr.get(‘selectMenuId‘)
            // if (lockr.get(‘selectMenuId‘) != undefined && lockr.get(‘selectMenuId‘) != null) {
            //     this.switchTab(lockr.get(‘selectMenuId‘))
            // }
            //根据当前页面的路由选中一级二级菜单
            this.initSelectMenu()
        },
        initSelectMenu(){
            //获取当前页面的路由
            let path = this.$route.path
            console.log(path)
            console.log(JSON.stringify(this.menus))
            //匹配到一级菜单
            
            let id = this.$route.meta.id
            let pid = this.$route.meta.pid
            console.log(id,pid)
            this.getParentsByAddressId({ id, pid, request: true })
            
        },
        switchTab(index) {
            this.active = index
            this.menuData = this.menus[index].children
            //设置默认选中菜单下面的最后一个子节点
            let el = this.menus[index].children[0]
            while (el && el.children.length>0) {
                el = el.children[0]
            }
            console.log(el)
            if(!el){
                if (this.menus[index].entry != "" && this.menus[index].entry != null && this.menus[index].entry != undefined) {
                    el = this.menus[index]
                }
            }
            console.log(el.url)
            this.$router.push(el.url)
            lockr.set(‘selectMenuId‘, index)
            //通过id获取到菜单下面的按钮
            this.$ajax.get(Api.getNodesById+"/"+el.id).then((res) => {
                if (res.code === 200) {
                    let item = res.data
                    let permissionArr = []
                    if (item && item.length > 0) {
                        for (let i = 0; i < item.length; i++) {
                            permissionArr.push(item[i].url)
                        }
                    }
                    this.$store.dispatch(‘setPermission‘, permissionArr)
                } else {
                    this.$message.error(res.message)
                }
            })
        }
    },
    mounted() {
        this.init()
    },
    updated(){
        console.log(this.logData)
        console.log(this.parentNodes)
        console.log(this.parentNodes)
    }
};
</script>
<style lang="scss">
@import ‘../../frameworks/assets/css/theme.scss‘;
.logo {
    display: inline-block;
    height: 60px;
    line-height: 60px;
    &>span {
        float: left
    }
}

.logo,
#h-icon {
    display: inline-block;
    &>i {
        font-style: normal
    }
}

#h-icon {
    height: 60px;
    vertical-align: top
}

#h-navbar {
    //float: right; //display: inline-block;
    font-size: 0;
    height: 100%; // width: 800px;
    overflow: hidden;
    margin-right: 100px;
    .navbar {
        height: 100%; // width: 4000px;
        li {
            list-style: none;
            position: relative;
            display: inline-block;
            height: 100%;
            &>i {
                font-size: 14px;
                color: #59a5e4;
                font-weight: 700;
                font-style: normal;
                margin-right: 8px;
                cursor: default;
            }
            &>a {
                font-size: 16px;
                color: white;
                font-weight: 500
            }
        }
        li.active {
            &>a {
                color: #FFBD20
            }
        }
    }
}


.el-container {
    width: 100%;
    height: 100%;
}

.el-header {
    @include el-header-background();
    display: flex;
    justify-content: space-between;
}

.el-header,
.el-footer {
    color: $color_white;
    text-align: left;
    text-indent: 10px;
    line-height: 60px;
    & span.sys_name {
        font-size: 24px;
        margin-left: 5px;
        float: left;
    }
    & span.quit {
        //float: right;
        margin-right: 20px;
        font-size: 24px;
        margin-top: 18px;
    }
}

.el-aside {
    border: 1px solid #d2d2d2;
    color: #464C5B;
    text-align: center;
    line-height: $leftbar_width;
    height: calc(100vh - 60px);
    overflow: hidden!important; // box-shadow: 1px 0 6px #888888;
    z-index: 0;
}

.el-scrollbar {
    height: 100%
}

.el-main {
    background-color: $main_bg_color;
    color: #333;
    text-align: center;
    height: 100%;
    padding: 0!important;
}

.app-main {
    height: 100%;
}

body>.el-container {
    margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
    line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
    line-height: 320px;
}

.lang {
    @include base-background();
}
</style>