Vue3+TypeScript搭建最基础的后台管理系统（含tabs设计）

主页面：放置所有底层内容

复制代码

<template>
  <div class="wrapper">
    <el-container>
      <el-header><Header></Header></el-header>
      <el-container>
        <el-aside style="width: 200px;"><Sidebar></Sidebar></el-aside>
        <el-main class="mainClass">
          <Tabs></Tabs>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>



<script setup lang="ts">
import Header from '@/components/Manager/mainFirstComponents/header.vue';
import Sidebar from '@/components/Manager/mainFirstComponents/sidebar.vue';
import Tabs from '@/components/Manager/mainFirstComponents/tabs.vue';
</script>

<style scoped>
.wrapper {
  height: 100vh;
  overflow: hidden;
}
.mainClass{
  margin: 15px;
  border: 2px solid #1abc9c; /* 绿色边框 */
  border-radius: 12px; /* 圆角效果 */
  background-color: #f9fafb; /* 背景色，稍微浅一点的颜色 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  max-width: 90%; /* 限制最大宽度 */
  height: 90vh;
}
</style>

侧边导航栏：

tabs：实现标签路由管理

复制代码

<template>
  <el-tabs
      v-model="activeTab"
      type="card"
      @tab-click="handleTabClick"

  >
    <el-tab-pane
        v-for="(tab, index) in tabs"
        :key="tab.index"
        :label="tab.title"
        :name="tab.index"
    >
      <template #label>
        <span>{{ tab.title }}</span>
        <span
            @click.stop="closeTab(index)"
        >
          ×
        </span>
      </template>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const activeTab = ref('/manager');
const tabs = ref([
  { index: '/manager', title: '系统首页' },
]);

const route = useRoute();
const router = useRouter();

onMounted(() => {
  router.push('/manager');
});

// 监听路由变化并更新选中的标签
watch(() => route.path, (newPath) => {
  const tabExists = tabs.value.find((tab) => tab.index === newPath);
  if (!tabExists) {
    tabs.value.push({ index: newPath, title: route.name });
  }
  activeTab.value = newPath;
});

// 处理标签点击事件，进行路由跳转
const handleTabClick = (tab: { index: string }) => {
  router.push(tab.props.name);
};

// 关闭标签并跳转到下一个
const closeTab = (index: number) => {
  const tabToClose = tabs.value[index];
  tabs.value.splice(index, 1);

  // 如果关闭的是当前选中的标签，则自动跳转到下一个标签
  if (activeTab.value === tabToClose.index) {
    activeTab.value = tabs.value[index]?.index || tabs.value[index - 1]?.index || '/';
    router.push(activeTab.value);
  }
};
</script>

<style scoped>

</style>

静态路由：

复制代码

    {
      path: "/manager",
      component: () => import('@/components/Manager/MainFirstPage.vue'),
      children: [
        {
          name:'课程管理页',
          path: "courseManage",
          component: () => import('@/components/Manager/courseManage.vue')
        },
        {
          name:'测试页',
          path: "managerMainPage",
          component: () => import('@/components/Manager/managerMainPage.vue')
        },
      ],
    },