element-ui实现菜单的路由切换

最新推荐文章于 2025-06-13 12:32:42 发布

zhuhongjin0610

最新推荐文章于 2025-06-13 12:32:42 发布

阅读量1w

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/lianxin19900610/article/details/81356537

前端专栏收录该内容

51 篇文章

订阅专栏

本文介绍了一个电子印章管理系统的UI设计方案，包括主控台、业务中心、生产中心、后台管理和审核中心等模块的导航菜单结构及样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>