Element plus menu使用方式

<el-menu
:default-active="active"
class="sidebar-menu"
background-color="#f9f9f9"
text-color="#565656"
unique-opened
router
active-text-color="#0079fe"
:collapse="isCollapse"
@select="handleSelect">
<template v-for="item in menuList">
<template v-if="item.children&&item.level==0">
<el-submenu :index="String(item.id)" :key="item.id">
<template #title>
<i class="el-icon-s-order" style="margin-right: 5px;font-size:20px;"></i>
<span>{{ item.menuName }}</span>
</template>
<el-menu-item v-for="(items, i) in item.children" :key="i" :index="items.menuUrl" :route="`/${items.menuUrl}`" :to="items.id" >
{{items.menuName}}
</el-menu-item>
</el-submenu>
</template>
<template v-else>
<template v-if="item.children&&item.level==0">
<el-submenu :index="String(item.id)" :key="item.id">
<template #title>
<i class="el-icon-s-order" style="margin-right: 5px;font-size:20px;"></i>
<span>{{ item.menuName }}</span>
</template>
<el-menu-item v-for="(items, i) in item.children" :key="i" :index="items.menuUrl" :route="`/${items.menuUrl}`" :to="items.id" >
{{items.menuName}}
</el-menu-item>
</el-submenu>
</template>
<template v-else>
<el-menu-item :index="item.menuUrl" :route="`/${item.menuUrl}`" :key="item.id" :to="item.id">
{{item.menuName}}
</el-menu-item>
</template>
</template>
</template>
</el-menu>

 

这里面主要是 :default-active="active" 这句话非常重要 active
:route="`/${items.menuUrl}`" 需要跟active里的值相等
例如：http://localhost:8081/inquiryDisposal
**active = inquiryDisposal**
**route = “inquiryDisposal”**