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>
  
相关推荐
万少9 分钟前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL14 分钟前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl0230 分钟前
java web5(黑马)
java·开发语言·前端
Amy.Wang31 分钟前
前端如何实现电子签名
前端·javascript·html5
海天胜景33 分钟前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼34 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿36 分钟前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再38 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling55543 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录1 小时前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css