测试路由跳转

package-lock.json

@@ -8,6 +8,7 @@
       "name": "a1800",
       "version": "0.0.0",
       "dependencies": {
+        "@vueuse/rxjs": "^12.5.0",
         "axios": "^1.7.9",
         "dayjs": "^1.11.13",
         "pinia": "^2.3.0",
@@ -1903,6 +1904,34 @@
         }
       }
     },
+    "node_modules/@vueuse/rxjs": {
+      "version": "12.5.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/rxjs/-/rxjs-12.5.0.tgz",
+      "integrity": "sha512-jEsNDkWiqT72tLVxfFCuD/f1eIHXcDYSwvxwSvSS+I7EVniQM32ReaGWq7pVfpQKkX9XWOYQwQJMgkMt+fVE0A==",
+      "license": "MIT",
+      "dependencies": {
+        "@vueuse/shared": "12.5.0",
+        "vue": "^3.5.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "rxjs": ">=6.0.0"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "12.5.0",
+      "resolved": "https://registry.npmmirror.com/@vueuse/shared/-/shared-12.5.0.tgz",
+      "integrity": "sha512-vMpcL1lStUU6O+kdj6YdHDixh0odjPAUM15uJ9f7MY781jcYkIwFA4iv2EfoIPO6vBmvutI1HxxAwmf0cx5ISQ==",
+      "license": "MIT",
+      "dependencies": {
+        "vue": "^3.5.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/alien-signals": {
       "version": "0.4.14",
       "resolved": "https://registry.npmmirror.com/alien-signals/-/alien-signals-0.4.14.tgz",

package.json

@@ -11,6 +11,7 @@
     "type-check": "vue-tsc --build"
   },
   "dependencies": {
+    "@vueuse/rxjs": "^12.5.0",
     "axios": "^1.7.9",
     "dayjs": "^1.11.13",
     "pinia": "^2.3.0",

src/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { RouterLink, RouterView } from "vue-router";
-import HelloWorld from "./components/HelloWorld.vue";
+
 </script>
 
 <template>

src/views/AboutView.vue

@@ -1,9 +1,34 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
+<script setup lang="ts">
+import { BehaviorSubject,interval,map,startWith,scan } from 'rxjs'
+import { onMounted, onUnmounted, watch } from 'vue'
+import { useSubject,useObservable } from '@vueuse/rxjs'
+
+const countSubject = new BehaviorSubject(0)
+const count = useSubject(countSubject)
+
+const count2 = useObservable(
+  interval(1000).pipe(
+    map(() => 1),
+    startWith(0),
+    scan((total, next) => next + total),
+  )
+)
 
-<style>
+onMounted(() => {
+  watch(count, value => console.info('from watcher:', value))
 
-</style>
+  const subscription = countSubject.subscribe(value => console.info('from subscriber: ', value))
+  onUnmounted(() => {
+    subscription.unsubscribe()
+  })
+})
+</script>
+
+<template>
+  <button class="btn-fill px-4 py-2 rounded-lg" @click="count++">
+    count is: {{ count }}
+  </button>
+  <button class="btn-fill px-4 py-2 rounded-lg">
+    count is: {{ count2 }}
+  </button>
+</template>

src/views/HomeView.vue

@@ -99,7 +99,7 @@
 		<div class="mx-8 max-w-[640px] rounded px-4 flex-auto h-9 bg-[#F2F2F2] text-[#646566] flex items-center justify-center">
 			<p class="whitespace-nowrap overflow-hidden text-ellipsis">A09损坏，请关闭！</p>
 		</div>
-		<div class="ml-auto mr-8 text-text flex max-w-[180px]">
+		<div class="ml-auto mr-8 text-text flex max-w-[180px]" @click="testRoute">
 			<p>当前用户：</p>
 			<p>admin</p>
 		</div>
@@ -114,4 +114,10 @@ import StepItem from "@/components/StepItem.vue";
 import OpGroupBox from "@/components/OpGroupBox.vue";
 import TubeState from "@/components/TubeState.vue";
 import Time from "@/components/Time.vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter()
+function testRoute() {
+	router.push('/about')
+}
 </script>