<template>
<div>
<ul>
<el-menu unique-opened :default-active="pagedefault" router> <!-- router 使用路由切换-->
<el-submenu index="1">
<template slot="title"><i class="navicon nav-1"></i>概况图</template>
<el-menu-item index="index">主控台(假菜单)</el-menu-item>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="navicon nav-2"></i>业务中心</template>
<el-menu-item index="list">电子印章申请</el-menu-item>
<el-menu-item index="data">电子印章续费申请</el-menu-item>
<el-menu-item index="">电子印章补办申请</el-menu-item>
<el-menu-item index="">电子印章挂失申请</el-menu-item>
<el-menu-item index="">电子印章变更申请</el-menu-item>
<el-menu-item index="">电子印章注销申请</el-menu-item>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="navicon nav-3"></i>生产中心</template>
<el-menu-item index="">电子印章制作</el-menu-item>
<el-menu-item index="">电子印章续期</el-menu-item>
<el-menu-item index="">电子印章补办</el-menu-item>
<el-menu-item index="">电子印章挂失</el-menu-item>
<el-menu-item index="">电子印章变更</el-menu-item>
<el-menu-item index="">电子印章注销</el-menu-item>
</el-submenu>
<el-submenu index="4">
<template slot="title"><i class="navicon nav-4"></i>后台管理</template>
<el-menu-item index="">组织架构维护</el-menu-item>
<el-menu-item index="">用户管理</el-menu-item>
<el-menu-item index="">角色配置</el-menu-item>
</el-submenu>
<el-submenu index="5">
<template slot="title"><i class="navicon nav-5"></i>审核中心</template>
<el-menu-item index="">订单审核</el-menu-item>
<el-menu-item index="">代理商审核</el-menu-item>
<el-menu-item index="">实名审核</el-menu-item>
</el-submenu>
</el-menu>
</ul>
</div>
</template>
<script>
export default {
name: "navigation",
data(){
return {
pagedefault: "",
}
},
watch: {
$route() {
debugger
if (this.$route.meta.parentPath) {
this.pagedefault = this.$route.meta.parentPath; // 实现路由切换
}
}
},
methods:{
// handleOpen(key, keyPath) {
// console.log(key, keyPath);
// },
// handleClose(key, keyPath) {
// console.log(key, keyPath);
// }
}
}
</script>
<style >
.is-opened .el-submenu__title{
background: #BFDFFA;
color: #00afff;
padding-left: 12px !important;
}
</style>
element-ui实现菜单的路由切换
猜你喜欢
转载自blog.csdn.net/lianxin19900610/article/details/81356537
今日推荐
周排行