使用el-menu遇到的坑
標籤的寫法,sidebar-item是一個子組件,遍歷菜單詳細信息的
<el-menu mode="vertical" :default-active="$route.path" :default-openeds="openeds">
<sidebar-item :routes="menus"></sidebar-item>
</el-menu>
sidebar-item 頁面:
<template v-for="item in routes">
<router-link v-if="item.children==null &&item.pid==menuID" :to="item.url">
<el-menu-item :index="item.id+'/'+item.name" class='submenu-title-noDropdown'>
<svg-icon v-if='item.icon' :icon-class="item.icon"></svg-icon><span slot="title">{{item.name}}</span>
</el-menu-item>
</router-link>
<el-submenu :index="item.id+'/'+item.name" v-if="item.children ">
<template slot="title">
<svg-icon v-if='item.icon' :icon-class="item.icon"></svg-icon><span>{{item.name}}</span>
</template>
<template v-for="child in item.children" v-if='item.children '>
<router-link v-if="child.show == 1" :to="child.url">
<el-menu-item :index="child.id+'/'+child.name">
<span>{{child.name}}</span>
</el-menu-item>
</router-link>
</template>
</el-submenu>
</template>
問題出現的地方是這裏:這個index是菜單的key,一定不能是空,或者只是父級路由地址,比如:/topMenu
而children路由裏的 path設爲“”,設爲空的目的是進來主菜單後,默認跳轉到path: “”的頁面上,這就導致了,這個菜單會一直高亮,不管選中其它任何菜單都不會改變這個菜單的高亮屬性
解決辦法
修改子菜單路由地址,不要設爲空“”