vue菜单栏跳转方案

vue菜单栏跳转方案

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