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>
  
相关推荐
骑自行车的码农12 分钟前
React短文系列 遍历fiber树 App的创建
前端·react.js
AskSky15 分钟前
为了搞一个完美的健身APP,我真是费尽心机
前端
斯~内克21 分钟前
基于Vue.js和PDF-Lib的条形码生成与批量打印方案
前端·vue.js·pdf
阴阳怪气乌托邦22 分钟前
别再啃OA代码了!低代码"搭积木"式搞数智化,我直接少写500行
前端·低代码
beelan26 分钟前
v-on的思考
前端
山河木马29 分钟前
前端学习C++之:.h(.hpp)与.cpp文件
前端·javascript·c++
用户92724725021929 分钟前
PHP + CSS + JS + JSON 数据采集与展示系统,支持伪静态
前端
努力只为躺平33 分钟前
一文搞懂 Promise 并发控制:批量执行 vs 最大并发数,实用场景全解析!
前端·javascript
Web小助手35 分钟前
大保剑:Promise的有趣体验
javascript
李大玄35 分钟前
Google浏览器拓展工具 "GU"->google Utils
前端·javascript·github