初始化

src/views/dashboard1/index.vue

@@ -1,44 +1,37 @@
 <script lang="ts" setup>
-import { computed, ref, type Component } from "vue";
+import { computed } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import SwitchPageBtn from "./components/btn";
 import backgroundVideo from "./assets/循环背景动画.mp4";
-import AlarmManagementPage from "./pages/AlarmManagementPage.vue";
-import DataReportPage from "./pages/DataReportPage.vue";
-import EquipmentManagementPage from "./pages/EquipmentManagementPage.vue";
-import IntegratedCenterPage from "./pages/IntegratedCenterPage.vue";
-import PatrolPlanPage from "./pages/PatrolPlanPage.vue";
-import VideoCenterPage from "./pages/VideoCenterPage.vue";
 
-const currentTab = ref<number>(1);
+interface DashboardTab {
+  id: number;
+  text: string;
+  path: string;
+}
 
-const tabs = {
+const route = useRoute();
+const router = useRouter();
+
+const tabs: Record<"left" | "right", DashboardTab[]> = {
   left: [
-    { id: 1, text: "监管中心" },
-    { id: 2, text: "设备管理" },
-    { id: 3, text: "视频中心" },
+    { id: 1, text: "监管中心", path: "/dashboard/integrated-center" },
+    { id: 2, text: "设备管理", path: "/dashboard/equipment-management" },
+    { id: 3, text: "视频中心", path: "/dashboard/video-center" },
   ],
   right: [
-    { id: 4, text: "告警管理" },
-    { id: 5, text: "巡检记录" },
-    { id: 6, text: "统计分析" },
+    { id: 4, text: "告警管理", path: "/dashboard/alarm-management" },
+    { id: 5, text: "巡检记录", path: "/dashboard/patrol-plan" },
+    { id: 6, text: "统计分析", path: "/dashboard/data-report" },
   ],
 };
 
-const pageComponents: Record<number, Component> = {
-  1: IntegratedCenterPage,
-  2: EquipmentManagementPage,
-  3: VideoCenterPage,
-  4: AlarmManagementPage,
-  5: PatrolPlanPage,
-  6: DataReportPage,
-};
+const activeTabId = computed(() => Number(route.meta.tabId) || 1);
 
-const currentViewComponent = computed<Component>(
-  () => pageComponents[currentTab.value] ?? IntegratedCenterPage,
-);
-
-function switchPage(tab: number) {
-  currentTab.value = tab;
+function switchPage(tab: DashboardTab) {
+  if (route.path !== tab.path) {
+    router.push(tab.path);
+  }
 }
 </script>
 
@@ -58,27 +51,27 @@ function switchPage(tab: number) {
           <SwitchPageBtn
             v-for="tab in tabs.left"
             :key="tab.id"
-            :active="currentTab === tab.id"
+            :active="activeTabId === tab.id"
             :text="tab.text"
             direction="left"
-            @click="switchPage(tab.id)"
+            @click="switchPage(tab)"
           />
         </div>
         <div class="right">
           <SwitchPageBtn
             v-for="tab in tabs.right"
             :key="tab.id"
-            :active="currentTab === tab.id"
+            :active="activeTabId === tab.id"
             :text="tab.text"
             direction="right"
-            @click="switchPage(tab.id)"
+            @click="switchPage(tab)"
           />
         </div>
       </div>
       <div class="content-stage">
-        <KeepAlive>
-          <component :is="currentViewComponent" />
-        </KeepAlive>
+        <RouterView v-slot="{ Component, route }">
+          <component :is="Component" :key="route.fullPath" />
+        </RouterView>
       </div>
     </div>
   </div>