vue菜单栏跳转方案

vue菜单栏跳转方案

js 复制代码
 <template>
  <div>
    <el-container style="height: 100vh">
      <el-aside width="200px" style="background-color: #b3c0d1">
        <el-menu
          @open="handleOpen"
          @close="handleClose"
          @select="handleMenuSelect"
        >
          <!-- 自服务功能模块 -->
          <el-submenu index="0">
            <template slot="title"
              ><i class="el-icon-s-promotion"></i>自服务</template
            >
            <el-menu-item index="personal_info"
              ><i class="el-icon-s-custom"></i> 个人信息</el-menu-item
            >
            <el-menu-item index="modify_info"
              ><i class="el-icon-s-tools"></i> 修改信息</el-menu-item
            >
            <el-menu-item index="modify_password"
              ><i class="el-icon-lock"></i> 修改密码</el-menu-item
            >
          </el-submenu>
          <!-- 卖家功能模块 -->
          <el-submenu index="1">
            <template slot="title"
              ><i class="el-icon-s-shop"></i>卖家功能</template
            >
            <el-menu-item index="my_shop"
              ><i class="el-icon-office-building"></i> 我的店铺</el-menu-item
            >
            <el-menu-item index="shop_products"
              ><i class="el-icon-s-goods"></i> 店铺商品</el-menu-item
            >
            <el-menu-item index="shop_orders"
              ><i class="el-icon-s-order"></i> 店铺订单</el-menu-item
            >
          </el-submenu>
          <!-- 管理员功能模块 -->
          <el-submenu index="2">
            <template slot="title"
              ><i class="el-icon-s-custom"></i>管理员功能</template
            >
            <el-menu-item index="shop_management"
              ><i class="el-icon-s-shop"></i> 店铺管理</el-menu-item
            >
            <el-menu-item index="order_management"
              ><i class="el-icon-s-order"></i> 订单管理</el-menu-item
            >
            <el-menu-item index="data_report"
              ><i class="el-icon-s-data"></i> 数据报表</el-menu-item
            >
            <el-menu-item index="user_management"
              ><i class="el-icon-user-solid"></i> 用户管理</el-menu-item
            >
            <el-menu-item index="manager_management"
              ><i class="el-icon-s-management"></i> 店长管理</el-menu-item
            >
            <el-menu-item index="system_logs"
              ><i class="el-icon-s-operation"></i> 管理系统日志</el-menu-item
            >
            <el-menu-item index="category_management"
              ><i class="el-icon-s-order"></i> 商品分类管理</el-menu-item
            >
            <el-menu-item index="product_recommendation"
              ><i class="el-icon-goods"></i> 商品推荐管理</el-menu-item
            >
            <el-menu-item index="ranking_management"
              ><i class="el-icon-scissors"></i> 排行榜管理</el-menu-item
            >
            <el-menu-item index="advertisement_management"
              ><i class="el-icon-reading"></i> 广告招商管理</el-menu-item
            >
            <el-menu-item index="carousel_management"
              ><i class="el-icon-picture"></i> 轮播图管理</el-menu-item
            >
            <el-menu-item index="system_notice"
              ><i class="el-icon-s-comment"></i> 系统公告</el-menu-item
            >
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="logout()">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>王小虎</span>
        </el-header>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
  
  <script>
export default {
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    handleMenuSelect(key, keyPath) {
      console.log(key);
      this.$router.push("/back_home/" + key);
    },
    logout() {
      this.$router.push("/back_login");
    },
  },
};
</script>
  
  <style>
.el-header {
  background-color: #b3c0d1;
  line-height: 60px;
}

.el-aside {
}
</style>
  
相关推荐
Seveny0714 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy15 小时前
css的基本知识
前端·css
昔人'15 小时前
css `lh`单位
前端·css
前端君16 小时前
实现最大异步并发执行队列
javascript
Nan_Shu_61417 小时前
Web前端面试题(2)
前端
知识分享小能手17 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队18 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光18 小时前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军18 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
huangql52019 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js