Vue/vuex/vue-router/element-ui 一个后台管理系统实现侧边栏和可配置tab标签栏的demo

最新推荐文章于 2025-07-01 10:37:12 发布

原创

最新推荐文章于 2025-07-01 10:37:12 发布 · 1.5w 阅读

72 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vuex #vue-router #element-ui

自制一个简单demo，实现一个包含侧边栏、tab标签栏的后台管理系统的大致框架，在此做一下总结。

先上图

在这里插入图片描述

项目地址

https://github.com/ekko-wang/vue-elementui-demo

功能点

可配置的侧边栏；
侧边栏点击时跳转至相应的router，若没有该标签则新建，已有则激活这个标签；
点击标签栏中的标签实现下方的路由跳转；
关闭所有标签栏则自动打开至index。

1、侧边栏

src/components/navMenu/navMenu.vue

<!--本页为左侧下拉菜单-->
<template>
  <el-row class="tac">
    <el-col :span="24">
      <el-menu
        default-active=""
        class="el-menu-vertical-demo"
        background-color="#545c64"
        text-color="#fff"
        unique-opened
        router
        active-text-color="#fff"
      >
        <el-menu-item index="index" @click="clickMenu('index')">
          <i class="el-icon-star-on"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-submenu
          v-for="item of menu"
          :index="item.id"
          :key="item.id"
        >
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>{
  
  {item.name}}</span>
          </template>
          <el-menu-item-group class="over-hide">
            <el-menu-item