vue3

11.vue3/vue-router/src/App.vue

@@ -1,160 +1,31 @@
 <template>
-  <div class="max-w-md mx-auto p-6 bg-white rounded-xl shadow-lg mt-10">
-    <h1 class="text-2xl font-bold text-center mb-6">简易任务计时器</h1>
-    
-    <!-- 时间显示 -->
-    <div class="flex justify-center items-center mb-8">
-      <div class="text-6xl font-mono flex">
-        <span class="w-16 text-center">{{ hours.toString().padStart(2, '0') }}</span>
-        <span class="mx-1">:</span>
-        <span class="w-16 text-center">{{ minutes.toString().padStart(2, '0') }}</span>
-        <span class="mx-1">:</span>
-        <span class="w-16 text-center">{{ seconds.toString().padStart(2, '0') }}</span>
-      </div>
-    </div>
-    
-    <!-- 时间设置 -->
-    <div class="grid grid-cols-3 gap-4 mb-8">
-      <div>
-        <label class="block text-gray-700 text-sm font-medium mb-2">小时</label>
-        <input
-          type="number"
-          v-model.number="hoursInput"
-          min="0"
-          max="23"
-          class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
-        >
-      </div>
-      <div>
-        <label class="block text-gray-700 text-sm font-medium mb-2">分钟</label>
-        <input
-          type="number"
-          v-model.number="minutesInput"
-          min="0"
-          max="59"
-          class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
-        >
-      </div>
-      <div>
-        <label class="block text-gray-700 text-sm font-medium mb-2">秒</label>
-        <input
-          type="number"
-          v-model.number="secondsInput"
-          min="0"
-          max="59"
-          class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
-        >
-      </div>
-    </div>
-    
-    <!-- 控制按钮 -->
-    <div class="flex justify-center space-x-4">
-      <button
-        @click="startTimer"
-        :disabled="isRunning"
-        class="px-6 py-3 bg-green-500 text-white rounded-md hover:bg-green-600 transition-colors"
-      >
-        启动
-      </button>
-      <button
-        @click="pauseTimer"
-        :disabled="!isRunning"
-        class="px-6 py-3 bg-yellow-500 text-white rounded-md hover:bg-yellow-600 transition-colors"
-      >
-        暂停
-      </button>
-      <button
-        @click="resetTimer"
-        class="px-6 py-3 bg-red-500 text-white rounded-md hover:bg-red-600 transition-colors"
-      >
-        重置
-      </button>
-    </div>
+  <div>
+    <h1>首页</h1>
+    <RouterLink to="/home">主页</RouterLink>
+    <RouterLink :to="{
+      name:'liebiao',
+      query:{
+        id:12,
+        age:23,
+        desc:'这是一个对象'
+      }
+    }">列表</RouterLink>
+    <!-- <RouterLink :to="`/list?names=图图`">列表</RouterLink> -->
+    <!-- <RouterLink to='/my/1/易语言'>我的</RouterLink> -->
+    <RouterLink :to="{
+      name:'wode',
+      params:{
+        ids:12
+      }
+    }">我的</RouterLink>
+    <RouterView></RouterView>
   </div>
 </template>
 
-<script setup lang="ts">
-import { ref, onUnmounted } from 'vue';
-
-// 状态管理
-const hours = ref(0);
-const minutes = ref(0);
-const seconds = ref(0);
-const hoursInput = ref(0);
-const minutesInput = ref(0);
-const secondsInput = ref(0);
-const isRunning = ref(false);
-let timer: number | null = null;
-
-// 启动计时器
-const startTimer = () => {
-  // 如果没有设置时间，使用输入值
-  if (hours.value === 0 && minutes.value === 0 && seconds.value === 0) {
-    hours.value = hoursInput.value;
-    minutes.value = minutesInput.value;
-    seconds.value = secondsInput.value;
-  }
-  
-  // 至少需要设置1秒
-  if (hours.value === 0 && minutes.value === 0 && seconds.value === 0) {
-    alert('请设置倒计时时间');
-    return;
-  }
-  
-  isRunning.value = true;
-  
-  // 每秒更新一次
-  timer = setInterval(() => {
-    if (seconds.value > 0) {
-      seconds.value--;
-    } else {
-      if (minutes.value > 0) {
-        minutes.value--;
-        seconds.value = 59;
-      } else {
-        if (hours.value > 0) {
-          hours.value--;
-          minutes.value = 59;
-          seconds.value = 59;
-        } else {
-          // 时间到
-          clearInterval(timer!);
-          isRunning.value = false;
-          alert('时间到！');
-        }
-      }
-    }
-  }, 1000) as unknown as number;
-};
-
-// 暂停计时器
-const pauseTimer = () => {
-  if (timer) {
-    clearInterval(timer);
-    timer = null;
-  }
-  isRunning.value = false;
-};
-
-// 重置计时器
-const resetTimer = () => {
-  pauseTimer();
-  hours.value = 0;
-  minutes.value = 0;
-  seconds.value = 0;
-  hoursInput.value = 0;
-  minutesInput.value = 0;
-  secondsInput.value = 0;
-};
-
-// 组件卸载时清理定时器
-onUnmounted(() => {
-  if (timer) {
-    clearInterval(timer);
-  }
-});
+<script lang="ts" setup>
+import {ref,reactive} from "vue" 
+import { RouterView,RouterLink } from "vue-router";
 </script>
 
-<style scoped>
-/* 自定义样式 */
-</style>
+<style lang="scss" scoped>
+</style>