vue点击横向主菜单，侧边栏只显示当前的主菜单怎么写

Question

vue点击横向主菜单，侧边栏只显示当前的主菜单怎么写,麻烦给个思路

效果应该是点击综合查询 左侧出来综合查询下的菜单 点击新契约 左侧出现新契约下的菜单

//侧边栏代 slidebar.vue

<div class="sidebar">
        <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#324157"
            text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>
            <template v-for="item in items">
                <template v-if="item.subs">
                    <el-submenu :index="item.index" :key="item.index">
                        <template slot="title">
                            <i :class="item.icon"></i><span slot="title">{{ item.title }}</span>
                        </template>
                        <template v-for="subItem in item.subs">
                            <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
                                <template slot="title">{{ subItem.title }}</template>
                                <el-menu-item v-for="(threeItem,i) in subItem.subs" :key="i" :index="threeItem.index">
                                    {{ threeItem.title }}
                                </el-menu-item>
                            </el-submenu>
                            <el-menu-item v-else :index="subItem.index" :key="subItem.index">
                                {{ subItem.title }}
                            </el-menu-item>
                        </template>
                    </el-submenu>
                </template>
                <template v-else>
                    <el-menu-item :index="item.index" :key="item.index">
                        <i :class="item.icon"></i><span slot="title">{{ item.title }}</span>
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
    </div>

//nav.vue 横向导航

<div class="nav">
        <!-- 折叠按钮 -->
        <div class="collapse-btn" @click="collapseChage">
            <i class="el-icon-menu"></i>
        </div>
        <ul class="meuns">
            <li><router-link to='/receipt'>综合查询</router-link></li>
            <li><router-link to='/aaa'>新契约</router-link></li>
            <li>保全作业</li>
            <li>理赔作业</li>
        </ul>
</div>

Answer 1

首先 我觉得你横向的导航也应该做成动态渲染 拿到每一个submenu的唯一标识，比如id或者url
这里的菜单可能会有一层或者多层 如果只有一层 就直接拼接 url 打开对应页面
多层的话就展开左边导航，el-menu 自身提供了 open 方法，用前面拿到的唯一标示和点击的 submenu 作比对展开就可以了