vue3

15.vue3/vue-router1/package-lock.json

@@ -8,7 +8,9 @@
       "name": "vue-router1",
       "version": "0.0.0",
       "dependencies": {
+        "nanoid": "^5.1.5",
         "sass": "^1.89.0",
+        "vite-plugin-vue-setup-extend": "^0.4.0",
         "vue": "^3.5.13",
         "vue-router": "^4.5.1"
       },
@@ -500,7 +502,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -517,7 +518,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -534,7 +534,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -551,7 +550,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -568,7 +566,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -585,7 +582,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -602,7 +598,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -619,7 +614,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -636,7 +630,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -653,7 +646,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -670,7 +662,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -687,7 +678,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -704,7 +694,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -721,7 +710,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -738,7 +726,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -755,7 +742,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -772,7 +758,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -789,7 +774,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -806,7 +790,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -823,7 +806,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -840,7 +822,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -857,7 +838,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -874,7 +854,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -891,7 +870,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -908,7 +886,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1303,7 +1280,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1317,7 +1293,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1331,7 +1306,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1345,7 +1319,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1359,7 +1332,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1373,7 +1345,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1387,7 +1358,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1401,7 +1371,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1415,7 +1384,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1429,7 +1397,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1443,7 +1410,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1457,7 +1423,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1471,7 +1436,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1485,7 +1449,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1499,7 +1462,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1513,7 +1475,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1527,7 +1488,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1541,7 +1501,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1555,7 +1514,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1569,7 +1527,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1607,14 +1564,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.21",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.21.tgz",
       "integrity": "sha512-EV/37Td6c+MgKAbkcLG6vqZ2zEYHD7bvSrzqqs2RIhbA6w3x+Dqz8MZM3sP6kGTeLrdoOgKZe+Xja7tUB2DNkQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.21.0"
@@ -1801,25 +1757,6 @@
         "vue": "^3.0.0"
       }
     },
-    "node_modules/@vue/devtools-core/node_modules/nanoid": {
-      "version": "5.1.5",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.5.tgz",
-      "integrity": "sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "bin": {
-        "nanoid": "bin/nanoid.js"
-      },
-      "engines": {
-        "node": "^18 || >=20"
-      }
-    },
     "node_modules/@vue/devtools-kit": {
       "version": "7.7.6",
       "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.7.6.tgz",
@@ -2266,7 +2203,6 @@
       "version": "0.25.4",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.4.tgz",
       "integrity": "sha512-8pgjLUcUjcgDg+2Q4NYXnPbo/vncAY4UmyaCm0jZevERqCHZIaWwdJHkf8XQtu4AxSKCdvrUbT0XUr1IdZzI8Q==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -2350,7 +2286,6 @@
       "version": "6.4.4",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.4.tgz",
       "integrity": "sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg==",
-      "dev": true,
       "license": "MIT",
       "peerDependencies": {
         "picomatch": "^3 || ^4"
@@ -2409,7 +2344,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,
@@ -2809,9 +2743,9 @@
       "license": "MIT"
     },
     "node_modules/nanoid": {
-      "version": "3.3.11",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
-      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.5.tgz",
+      "integrity": "sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw==",
       "funding": [
         {
           "type": "github",
@@ -2820,10 +2754,10 @@
       ],
       "license": "MIT",
       "bin": {
-        "nanoid": "bin/nanoid.cjs"
+        "nanoid": "bin/nanoid.js"
       },
       "engines": {
-        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+        "node": "^18 || >=20"
       }
     },
     "node_modules/node-addon-api": {
@@ -2980,7 +2914,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"
@@ -3030,6 +2963,24 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss/node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
     "node_modules/pretty-ms": {
       "version": "9.2.0",
       "resolved": "https://registry.npmjs.org/pretty-ms/-/pretty-ms-9.2.0.tgz",
@@ -3084,7 +3035,6 @@
       "version": "4.41.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.41.1.tgz",
       "integrity": "sha512-cPmwD3FnFv8rKMBc1MxWCwVQFxwf1JEmSX3iQXrRVVG15zerAIXRjMFVWnd5Q5QvgKF7Aj+5ykXFhUl+QGnyOw==",
-      "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.13",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.13.tgz",
       "integrity": "sha512-mEwzpUgrLySlveBwEVDMKk5B57bhLPYovRfPAXD5gA/98Opn0rCDj3GtLwFvCvH5RK9uPCExUROW5NjDwvqkxw==",
-      "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",

15.vue3/vue-router1/package.json

@@ -11,7 +11,9 @@
     "type-check": "vue-tsc --build"
   },
   "dependencies": {
+    "nanoid": "^5.1.5",
     "sass": "^1.89.0",
+    "vite-plugin-vue-setup-extend": "^0.4.0",
     "vue": "^3.5.13",
     "vue-router": "^4.5.1"
   },

15.vue3/vue-router1/src/components/Demo1.vue

@@ -1,12 +0,0 @@
-<template>
-  <div class="">
-    <h1>男装</h1>
-  </div>
-</template>
-
-<script lang="ts" setup>
-
-</script>
-
-<style lang="scss" scoped>
-</style>

15.vue3/vue-router1/src/components/Demo2.vue

@@ -1,13 +1,15 @@
 <template>
-    <div class="">
-      <h1>女装</h1>
-    </div>
-  </template>
+  <div>
+    <h1>女装</h1>
+    <input type="text">
+  </div>
+</template>
   
-  <script lang="ts" setup>
-  
-  </script>
+  <script lang="ts" setup name="ni">
+// import { useRoute } from "vue-router";
+// console.log(useRoute())
+</script>
   
   <style lang="scss" scoped>
-  </style>
+</style>
   

15.vue3/vue-router1/src/components/Demo3.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <h1>童装</h1>
+    <input type="text" />
+  </div>
+</template>
+    
+    <script lang="ts" setup name="Demo3">
+// import { useRoute } from "vue-router";
+// console.log(useRoute())
+</script>
+    
+    <style lang="scss" scoped>
+</style>
+    

15.vue3/vue-router1/src/components/Hi.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <h1>男装</h1>
+    <input type="text" />
+  </div>
+</template>
+  
+  <script lang="ts" setup name="Hi">
+  import { ref } from 'vue';
+</script>
+  
+  <style lang="scss" scoped>
+</style>
+  

15.vue3/vue-router1/src/router/index.ts

@@ -7,7 +7,8 @@ import {createRouter,createWebHistory,createWebHashHistory} from 'vue-router';
 import Home from '../views/Home.vue';
 import My from '../views/My.vue';
 import List from '../views/List.vue';
-import Demo1 from '@/components/Demo1.vue';
+import Detail from '@/views/Detail.vue';
+import Hi from '@/components/Hi.vue';
 import Demo2 from '@/components/Demo2.vue';
 
 const router = createRouter({
@@ -22,6 +23,12 @@ const router = createRouter({
             path:'/home',
             component: Home
         },
+        {
+            // path:'/detail/:id/:name',
+            path:'/detail',
+            component: Detail,
+            name:'xiangqing'
+        },
         {
             path:'/list',
             component: List,
@@ -32,11 +39,19 @@ const router = createRouter({
                 },
                 {
                     path:'demo1',
-                    component: Demo1
+                    component: Hi,
+                    // name:'nanzhuang'
+                },
+                {
+                    path:'demo3',
+                    component: ()=>import('../components/Demo3.vue'),
+                    // name:'nanzhuang'
                 },
                 {
                     path:'demo2',
-                    component: Demo2
+                    // path:'demo2/:id/:name1',
+                    component: Demo2,
+                    // name:"nvzhuang"
                 }
             ]
         },

15.vue3/vue-router1/src/views/Detail.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="">
+    <h1>详情</h1>
+    <!-- <KeepAlive>
+        <Demo1></Demo1>
+    </KeepAlive> -->
+   
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useRoute } from 'vue-router';
+console.log(useRoute(),'详情')
+const route = useRoute();
+console.log(route.query,'212')
+</script>
+
+<style lang="scss" scoped>
+</style>

15.vue3/vue-router1/src/views/Home.vue

@@ -1,11 +1,21 @@
 <template>
   <div class="">
     <h1>主页</h1>
+    <button @click="goToMy">我的</button>
   </div>
 </template>
 
 <script lang="ts" setup>
-
+import { useRouter } from 'vue-router';
+// 编程式导航
+const router = useRouter()
+function goToMy() {
+  // router.push('/my')
+  // router.forward()
+  // router.back()
+  console.log("执行")
+  router.go(-2)
+}
 </script>
 
 <style lang="scss" scoped>

15.vue3/vue-router1/src/views/List.vue

@@ -1,18 +1,57 @@
 <template>
-  <div class="">
+  <div class>
     <h1>列表</h1>
+    <!-- query传参 -->
     <RouterLink active-class="active" to="/list/demo1">男装</RouterLink>
     <RouterLink active-class="active" to="/list/demo2">女装</RouterLink>
+    <RouterLink active-class="active" to="/list/demo3">童装</RouterLink>
+    <!-- <RouterLink active-class="active" to="/list/demo2?id=10&name=哪吒">女装</RouterLink> -->
+    <!-- <RouterLink
+      active-class="active"
+      :to="{
+      name:'nvzhuang',
+      query:{
+        id:12,
+        name:'图图'
+      }
+    }"
+    >女装</RouterLink> -->
+    <!-- <ul>
+      <li v-for="(item,index) in list" :key="index">
+        <RouterLink :to="`/detail?id=${item.id}&user=${item.name}`">{{ item.name }}</RouterLink>
+        <RouterLink :to="{
+            name:'xiangqing',
+            query:{
+              id:item.id,
+              name:item.name
+            }
+        }">{{ item.name }}</RouterLink>
+      </li>
+    </ul> -->
+
     <div id="main">
-      <RouterView></RouterView>
+      <!-- <KeepAlive :include="['Demo2']"> -->
+      <RouterView v-slot="{Component}">
+        <KeepAlive :include="['Hi']">
+          <component :is="Component"></component>
+        </KeepAlive>
+      </RouterView>
     </div>
   </div>
 </template>
 
-<script lang="ts" setup>
-import { RouterView,RouterLink } from 'vue-router';
-
-
+<script lang="ts" setup name="haha">
+import { RouterView, RouterLink } from "vue-router";
+import { nanoid } from "nanoid";
+let list = [
+  { id: nanoid(10), name: "愤怒的小鸟", user: "小艾", password: "123456" },
+  { id: nanoid(10), name: "植物大战僵尸", user: "小赵", password: "999999" },
+  { id: nanoid(10), name: "超级马里奥", user: "小玉", password: "888888" },
+  { id: nanoid(10), name: "黄金矿工", user: "小段", password: "999999" },
+  { id: nanoid(10), name: "森林冰火人", user: "小郑", password: "000000" },
+  { id: nanoid(10), name: "赛尔号", user: "小马", password: "666666" }
+];
+console.log(list);
 </script>
 
 <style lang="scss" scoped>

15.vue3/vue-router1/src/views/params.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="">
+    <h1>列表</h1>
+    <!-- params传参 -->
+    <RouterLink active-class="active" to="/list/demo1">男装</RouterLink>
+    <!-- <RouterLink active-class="active" to="/list/demo2/10/哪吒">女装</RouterLink> -->
+    <RouterLink active-class="active" :to="{
+      name:'nvzhuang',
+      params:{
+        id:1,
+        name1:'图图'
+      }
+    }">女装</RouterLink>
+    <ul>
+      <li v-for="(item,index) in list" :key="index">
+        <!-- <RouterLink :to="`/detail/${item.id}/${item.name}`">{{ item.name }}</RouterLink> -->
+        <RouterLink :to="{
+          name:'xiangqing',
+          params:{
+            id:item.id,
+            name:item.name
+          }
+        }">{{ item.name }}</RouterLink>
+      </li>
+    </ul>
+    <div id="main">
+      <RouterView></RouterView>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { RouterView,RouterLink } from 'vue-router';
+import { nanoid } from 'nanoid';
+let list = [
+  { id: nanoid(10), name: "愤怒的小鸟", user: "小艾", password: "123456" },
+  { id: nanoid(10), name: "植物大战僵尸", user: "小赵", password: "999999" },
+  { id: nanoid(10), name: "超级马里奥", user: "小玉", password: "888888" },
+  { id: nanoid(10), name: "黄金矿工", user: "小段", password: "999999" },
+  { id: nanoid(10), name: "森林冰火人", user: "小郑", password: "000000" },
+  { id: nanoid(10), name: "赛尔号", user: "小马", password: "666666" },
+];
+console.log(list)
+</script>
+
+<style lang="scss" scoped>
+.active {
+  color: purple !important;
+}
+</style>

15.vue3/vue-router1/src/views/query.vue

@@ -0,0 +1,52 @@
+<template>
+    <div class="">
+      <h1>列表</h1>
+      <!-- query传参 -->
+      <RouterLink active-class="active" to="/list/demo1">男装</RouterLink>
+      <!-- <RouterLink active-class="active" to="/list/demo2?id=10&name=哪吒">女装</RouterLink> -->
+      <RouterLink active-class="active" :to="{
+        name:'nvzhuang',
+        query:{
+          id:12,
+          name:'图图'
+        }
+      }">女装</RouterLink>
+        <ul>
+          <li v-for="(item,index) in list" :key="index">
+            <RouterLink :to="`/detail?id=${item.id}&user=${item.name}`">{{ item.name }}</RouterLink>
+            <!-- <RouterLink :to="{
+              name:'xiangqing',
+              query:{
+                id:item.id,
+                name:item.name
+              }
+            }">{{ item.name }}</RouterLink> -->
+          </li>
+        </ul>
+  
+      <div id="main">
+        <RouterView></RouterView>
+      </div>
+    </div>
+  </template>
+  
+  <script lang="ts" setup>
+  import { RouterView,RouterLink } from 'vue-router';
+  import { nanoid } from 'nanoid';
+  let list = [
+    { id: nanoid(10), name: "愤怒的小鸟", user: "小艾", password: "123456" },
+    { id: nanoid(10), name: "植物大战僵尸", user: "小赵", password: "999999" },
+    { id: nanoid(10), name: "超级马里奥", user: "小玉", password: "888888" },
+    { id: nanoid(10), name: "黄金矿工", user: "小段", password: "999999" },
+    { id: nanoid(10), name: "森林冰火人", user: "小郑", password: "000000" },
+    { id: nanoid(10), name: "赛尔号", user: "小马", password: "666666" },
+  ];
+  console.log(list)
+  </script>
+  
+  <style lang="scss" scoped>
+  .active {
+    color: purple !important;
+  }
+  </style>
+  

15.vue3/vue-router1/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: {

15.vue3/vue_project1/package-lock.json

@@ -3030,7 +3030,7 @@
     },
     "node_modules/vite-plugin-vue-setup-extend": {
       "version": "0.4.0",
-      "resolved": "https://registry.npmmirror.com/vite-plugin-vue-setup-extend/-/vite-plugin-vue-setup-extend-0.4.0.tgz",
+      "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": {