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>
  
相关推荐
江城开朗的豌豆4 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆5 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆5 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆6 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
小磊哥er13 分钟前
【前端工程化】前端组件模版构建那些事
前端
前端 贾公子14 分钟前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript
江城开朗的豌豆18 分钟前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js
十里青山26 分钟前
超好用的vue图片预览插件更新啦,hevue-img-preview 7.0.0版本正式发布,支持vue2/vue3/移动/pc,增加缩略图、下载、自定义样式等
前端·javascript·vue.js
lichenyang45335 分钟前
css模块化以及rem布局
前端·javascript·css
小熊哥^--^37 分钟前
条件渲染 v-show与v-if
前端