vue3

11.vue3/vue-router/package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "sass": "^1.89.2",
+        "vite-plugin-vue-setup-extend": "^0.4.0",
         "vue": "^3.5.13",
         "vue-router": "^4.5.1"
       },
@@ -500,7 +501,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -517,7 +517,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -534,7 +533,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -551,7 +549,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -568,7 +565,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -585,7 +581,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -602,7 +597,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -619,7 +613,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -636,7 +629,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -653,7 +645,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -670,7 +661,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -687,7 +677,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -704,7 +693,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -721,7 +709,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -738,7 +725,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -755,7 +741,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -772,7 +757,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -789,7 +773,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -806,7 +789,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -823,7 +805,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -840,7 +821,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -857,7 +837,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -874,7 +853,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -891,7 +869,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -908,7 +885,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1303,7 +1279,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1317,7 +1292,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1331,7 +1305,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1345,7 +1318,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1359,7 +1331,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1373,7 +1344,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1387,7 +1357,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1401,7 +1370,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1415,7 +1383,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1429,7 +1396,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1443,7 +1409,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1457,7 +1422,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1471,7 +1435,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1485,7 +1448,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1499,7 +1461,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1513,7 +1474,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1527,7 +1487,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1541,7 +1500,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1555,7 +1513,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1569,7 +1526,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1607,14 +1563,13 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
       "integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/node": {
       "version": "22.15.32",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.32.tgz",
       "integrity": "sha512-3jigKqgSjsH6gYZv2nEsqdXfZqIFGAV36XYYjf9KGZ3PSG+IhLecqPnI310RvjutyMwifE2hhhNEklOUrvx/wA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.21.0"
@@ -2266,7 +2221,6 @@
       "version": "0.25.5",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.5.tgz",
       "integrity": "sha512-P8OtKZRv/5J5hhz0cUAdu/cLuPIKXpQl1R9pZtvmHWQvrAUVd0UNIPT4IB4W3rNOqVO0rlqHmCIbSwxh/c9yUQ==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -2350,7 +2304,6 @@
       "version": "6.4.6",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.6.tgz",
       "integrity": "sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==",
-      "dev": true,
       "license": "MIT",
       "peerDependencies": {
         "picomatch": "^3 || ^4"
@@ -2409,7 +2362,6 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
@@ -2980,7 +2932,6 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
       "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -3084,7 +3035,6 @@
       "version": "4.43.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.43.0.tgz",
       "integrity": "sha512-wdN2Kd3Twh8MAEOEJZsuxuLKCsBEo4PVNLK6tQWAn10VhsVewQLzcucMgLolRlhFybGxfclbPeEYBaP6RvUFGg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/estree": "1.0.7"
@@ -3236,6 +3186,13 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "deprecated": "Please use @jridgewell/sourcemap-codec instead",
+      "license": "MIT"
+    },
     "node_modules/speakingurl": {
       "version": "14.0.1",
       "resolved": "https://registry.npmjs.org/speakingurl/-/speakingurl-14.0.1.tgz",
@@ -3276,7 +3233,6 @@
       "version": "0.2.14",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
       "integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fdir": "^6.4.4",
@@ -3330,7 +3286,7 @@
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
       "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/unicorn-magic": {
@@ -3391,7 +3347,6 @@
       "version": "6.3.5",
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
       "integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.25.0",
@@ -3550,6 +3505,28 @@
         "vite": "^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.0-0"
       }
     },
+    "node_modules/vite-plugin-vue-setup-extend": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-vue-setup-extend/-/vite-plugin-vue-setup-extend-0.4.0.tgz",
+      "integrity": "sha512-WMbjPCui75fboFoUTHhdbXzu4Y/bJMv5N9QT9a7do3wNMNHHqrk+Tn2jrSJU0LS5fGl/EG+FEDBYVUeWIkDqXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/compiler-sfc": "^3.2.29",
+        "magic-string": "^0.25.7"
+      },
+      "peerDependencies": {
+        "vite": ">=2.0.0"
+      }
+    },
+    "node_modules/vite-plugin-vue-setup-extend/node_modules/magic-string": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
+      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "license": "MIT",
+      "dependencies": {
+        "sourcemap-codec": "^1.4.8"
+      }
+    },
     "node_modules/vscode-uri": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.1.0.tgz",

11.vue3/vue-router/package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "sass": "^1.89.2",
+    "vite-plugin-vue-setup-extend": "^0.4.0",
     "vue": "^3.5.13",
     "vue-router": "^4.5.1"
   },

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

@@ -1,31 +1,160 @@
 <template>
-  <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 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>
 </template>
 
-<script lang="ts" setup>
-import {ref,reactive} from "vue" 
-import { RouterView,RouterLink } from "vue-router";
+<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>
 
-<style lang="scss" scoped>
-</style>
+<style scoped>
+/* 自定义样式 */
+</style>

11.vue3/vue-router/src/components/Demo3.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>Demo3 
+    <input type="text" name="" id="">
+  </div>
+</template>
+
+<script lang="ts" setup name="Demo3">
+import {ref,reactive} from "vue" 
+let aa = ref(1);
+</script>
+
+<style lang="scss" scoped>
+</style>

11.vue3/vue-router/src/components/Demo4.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>Demo4
+    <input type="text" name="" id="">
+  </div>
+</template>
+
+<script lang="ts" setup name="Demo4">
+import {ref,reactive} from "vue" 
+
+let bb = ref(2);
+</script>
+
+<style lang="scss" scoped>
+</style>

11.vue3/vue-router/src/router/index.ts

@@ -2,6 +2,7 @@ import { createRouter,createWebHistory,createWebHashHistory } from "vue-router";
 import Home from '../views/Home.vue';
 import List from '../views/List.vue';
 import My from '../views/My.vue';
+import { KeepAlive } from "vue";
 const router = createRouter({
     history:createWebHistory(),
     routes:[
@@ -21,11 +22,17 @@ const router = createRouter({
             children:[
                 {
                     path:'demo1',
-                    component:()=>import('../views/Demo1.vue')
+                    component:()=>import('../views/Demo1.vue'),
+                    meta:{
+                        keepAlive: false
+                    }
                 },
                 {
                     path:'demo2',
-                    component:()=>import('../views/Demo2.vue')
+                    component:()=>import('../views/Demo2.vue'),
+                    meta:{
+                        keepAlive: true
+                    }
                 }
             ]
         },

11.vue3/vue-router/src/views/Demo1.vue

@@ -1,8 +1,9 @@
 <template>
-  <div>男装</div>
+  <div>男装<input type="text"></div>
+  
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="Demo1">
 import {ref,reactive} from "vue" 
 
 </script>

11.vue3/vue-router/src/views/Demo2.vue

@@ -1,8 +1,12 @@
 <template>
-  <div>女装</div>
+  <div>女装
+
+    <input type="text" name="" id="">
+  </div>
+
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup name="Demo2">
 import {ref,reactive} from "vue" 
 import { useRoute } from "vue-router";
 let route = useRoute();

11.vue3/vue-router/src/views/List.vue

@@ -2,33 +2,42 @@
   <div>
     列表
     <ul>
-        <li v-for="(item,index) in newList" :key="item.id">
-            <RouterLink :to='`/list/demo${index + 1}`' active-class="active" >{{ item.shopName }}</RouterLink>
-        </li>
+      <li v-for="(item, index) in newList" :key="item.id">
+        <RouterLink :to="`/list/demo${index + 1}`" active-class="active">{{
+          item.shopName
+        }}</RouterLink>
+      </li>
     </ul>
     <div class="main">
-        <RouterView></RouterView>
+      <RouterView v-slot="{ Component, route }">
+        <KeepAlive>
+          <component :is="Component" v-if="route.meta.keepAlive"></component>
+        </KeepAlive>
+        <component :is="Component" v-if="!route.meta.keepAlive"></component>
+      </RouterView>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import {ref,reactive} from "vue" 
-import { RouterLink,RouterView } from "vue-router";
+import { ref, reactive } from "vue";
+import { RouterLink, RouterView, useRoute } from "vue-router";
+let route = useRoute();
+console.log(route)
 let newList = reactive([
-    {
-        id:1,
-        shopName: '男装'
-    },
-    {
-        id:2,
-        shopName: '女装'
-    },
-])
+  {
+    id: 1,
+    shopName: "男装",
+  },
+  {
+    id: 2,
+    shopName: "女装",
+  },
+]);
 </script>
 
 <style lang="scss" scoped>
 .active {
-    color: red !important;
+  color: red !important;
 }
 </style>

11.vue3/vue-router/src/views/My.vue

@@ -1,14 +1,31 @@
 <template>
   <div>
     我的
+    <!-- <component :is="activeComponent" /> -->
+    <button @click="changeMain">切换</button>
+    <button @click="goHome">去首页</button>
+   <KeepAlive >
+     <Demo3 v-if="isShow"></Demo3>
+   </KeepAlive>
   </div>
 </template>
 
 <script lang="ts" setup>
+import Demo3 from "@/components/Demo3.vue";
+import Demo4 from "@/components/Demo4.vue";
 import {ref,reactive} from "vue" 
-import { useRoute } from "vue-router";
+import { useRoute,useRouter } from "vue-router";
 let route = useRoute();
-console.log(route)
+let router = useRouter()
+let isShow = ref(true)
+let activeComponent = ref(Demo3)
+function changeMain() {
+    isShow.value = !isShow.value
+}
+function goHome() {
+    router.push('/home')
+}
+console.log(activeComponent.value)
 </script>
 
 <style lang="scss" scoped>

11.vue3/vue-router/vite.config.ts

@@ -3,12 +3,14 @@ import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueDevTools from 'vite-plugin-vue-devtools'
+import VueSetupExtend from 'vite-plugin-vue-setup-extend'
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
     vueDevTools(),
+    VueSetupExtend()
   ],
   resolve: {
     alias: {