更新路由跳转与题库管理页面显示

src/App.vue

@@ -1,4 +1,3 @@
-<!--全局样式-->
 <template>
   <div id="app">
     <Header />
@@ -6,18 +5,10 @@
       <Sidebar />
       <div class="content">
         <div class="title">测评系统后台</div>
-        <TabNavigation :active-tab="activeTab" @update:activeTab="activeTab = $event" />
+        <TabNavigation />
 
-        <!-- 内容区域 -->
-        <div v-if="activeTab === 'question'" class="question-management">
-          <QuestionSearch />
-          <QuestionTable />
-        </div>
-
-        <!-- 其他模块占位 -->
-        <div v-else class="placeholder">
-          <p>当前模块内容暂未开发</p>
-        </div>
+        <!-- 使用 router-view 替代原来的 tab 切换逻辑 -->
+        <router-view />
 
         <div class="footer-btn">
           <button class="btn-red">应用</button>
@@ -31,26 +22,21 @@
 import Header from './components/Layout/Header.vue'
 import Sidebar from './components/Layout/Sidebar.vue'
 import TabNavigation from './components/Tabs/TabNavigation.vue'
-import QuestionSearch from './components/Question/QuestionSearch.vue'
-import QuestionTable from './components/Question/QuestionTable.vue'
 
 export default {
   name: 'App',
   components: {
     Header,
     Sidebar,
-    TabNavigation,
-    QuestionSearch,
-    QuestionTable
-  },
-  data() {
-    return {
-      activeTab: 'question'
-    }
+    TabNavigation
+    // 移除 QuestionSearch 和 QuestionTable，因为它们现在在路由视图中
   }
+  // 移除 activeTab 数据属性
 }
 </script>
-<style>/* 保持原有的全局样式 */
+
+<style>
+/* 保持原有的全局样式不变 */
 * {
   margin: 0;
   padding: 0;
@@ -96,6 +82,7 @@ body {
   padding: 20px;
   background-color: white;
   overflow-y: auto;
+  position: relative;
 }
 
 .title {
@@ -128,6 +115,12 @@ body {
   opacity: 0.5;
 }
 
+.footer-btn {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+}
+/* 在 App.vue 的 style 标签中添加或修改以下样式 */
 .search-area {
   display: flex;
   justify-content: space-between;
@@ -175,38 +168,4 @@ body {
   font-size: 12px;
 }
 
-.table-container {
-  width: 100%;
-  border-collapse: collapse;
-  margin-top: 10px;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-  background-color: white;
-}
-
-th,
-td {
-  padding: 12px;
-  text-align: left;
-  border-bottom: 1px solid #ddd;
-}
-
-th {
-  background-color: #f2f2f2;
-  font-weight: normal;
-  color: #333;
-}
-
-tr:hover {
-  background-color: #f9f9f9;
-}
-
-.footer-btn {
-  position: absolute;
-  bottom: 20px;
-  right: 20px;
-}
 </style>

src/components/Tabs/TabNavigation.vue

@@ -1,24 +1,23 @@
-<!--标签页导航-->
 <template>
   <div class="tabs">
     <button
         class="tab-btn"
-        :class="{ active: activeTab === 'user' }"
-        @click="$emit('update:activeTab', 'user')"
+        :class="{ active: $route.path === '/users' }"
+        @click="$router.push('/users')"
     >
       用户数据
     </button>
     <button
         class="tab-btn"
-        :class="{ active: activeTab === 'wrong' }"
-        @click="$emit('update:activeTab', 'wrong')"
+        :class="{ active: $route.path === '/wrong-questions' }"
+        @click="$router.push('/wrong-questions')"
     >
       错题统计
     </button>
     <button
         class="tab-btn"
-        :class="{ active: activeTab === 'question' }"
-        @click="$emit('update:activeTab', 'question')"
+        :class="{ active: $route.path === '/questions' }"
+        @click="$router.push('/questions')"
     >
       题库管理
     </button>
@@ -27,12 +26,7 @@
 
 <script>
 export default {
-  name: 'TabNavigation',
-  props: {
-    activeTab: {
-      type: String,
-      required: true
-    }
-  }
+  name: 'TabNavigation'
+  // 移除 props，因为不再需要 activeTab
 }
 </script>

src/main.js

@@ -1,8 +1,9 @@
 import Vue from 'vue'
 import App from './App.vue'
-
+import router from "@/router";
 Vue.config.productionTip = false
 
 new Vue({
+    router,
   render: h => h(App),
 }).$mount('#app')

src/views/QuestionManage.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="question-management">
+    <QuestionSearch />
+    <QuestionTable />
+  </div>
+</template>
+
+<script>
+import QuestionSearch from '@/components/Question/QuestionSearch.vue'
+import QuestionTable from '@/components/Question/QuestionTable.vue'
+
+export default {
+  name: 'QuestionManage',
+  components: {
+    QuestionSearch,
+    QuestionTable
+  }
+}
+</script>

src/views/UserStatistics.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="user-statistics">
+    <p>用户统计数据模块</p>
+    <p>当前模块内容暂未开发</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UserStatistics'
+}
+</script>
+
+<style scoped>
+.user-statistics {
+  padding: 20px;
+}
+</style>

src/views/WrongQuestion.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="wrong-question">
+    <p>错题统计模块</p>
+    <p>当前模块内容暂未开发</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'WrongQuestion'
+}
+</script>
+
+<style scoped>
+.wrong-question {
+  padding: 20px;
+}
+</style>