路由

vue3/project4/package-lock.json

@@ -8,6 +8,7 @@
       "name": "project4",
       "version": "0.0.0",
       "dependencies": {
+        "nanoid": "^5.1.5",
         "vue": "^3.5.18",
         "vue-router": "^4.5.1"
       },
@@ -1511,25 +1512,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": "8.0.1",
       "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-8.0.1.tgz",
@@ -2335,9 +2317,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",
@@ -2346,10 +2328,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-releases": {
@@ -2556,6 +2538,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",

vue3/project4/package.json

@@ -14,6 +14,7 @@
     "type-check": "vue-tsc --build"
   },
   "dependencies": {
+    "nanoid": "^5.1.5",
     "vue": "^3.5.18",
     "vue-router": "^4.5.1"
   },

vue3/project4/src/router/index.ts

@@ -25,16 +25,19 @@ const routes:RouteType[] = [
     {
         path: '/list',
         component: List,
-        redirect: '/list/demo2',
+        // redirect: '/list/demo2',
         children: [
             // 只要是多级路由
             {
                 path: 'demo1',
+                // path: 'demo1/:id/:user/:sex',
                 component: Demo1,
                 
             },
             {
+                // path: 'demo2/:id/:user/:sex',
                 path: 'demo2',
+                name:'dier',
                 component: Demo2
             }
         ]

vue3/project4/src/views/Demo1.vue

@@ -1,12 +1,16 @@
 <template>
   <div>
     demo1
+    <p>我叫{{ user }},是个{{ sex }}孩,我的编号是{{ id }}</p>
   </div>
 </template>
 
 <script lang="ts" setup>
-import {ref,reactive} from "vue" 
-
+import {ref,reactive,toRefs} from "vue" 
+import {useRoute} from 'vue-router';
+const route = useRoute();
+console.log(route,'接受的')
+const {id,sex,user} = toRefs(route.params);
 </script>
 
 <style lang="scss" scoped>

vue3/project4/src/views/Demo2.vue

@@ -1,11 +1,16 @@
 <template>
   <div>
     demo2
+    <p>我叫{{ user }},是个{{ sex }}孩,我的编号是{{ id }}</p>
   </div>
 </template>
 
 <script lang="ts" setup>
-import {ref,reactive} from "vue" 
+import {ref,reactive,toRefs} from "vue" 
+import {useRoute} from 'vue-router';
+const route = useRoute();
+console.log(route,'接受的')
+const {id,sex,user} = toRefs(route.query);
 
 </script>
 

vue3/project4/src/views/List.vue

@@ -2,8 +2,24 @@
   <div>
     <h1>列表</h1>
     <!-- 声明式导航 -->
-    <RouterLink to="/list/demo1">第一个</RouterLink>
-    <RouterLink to="/list/demo2">第二个</RouterLink>
+    <!-- <RouterLink to="/list/demo1">第一个</RouterLink>
+    <RouterLink to="/list/demo2">第二个</RouterLink> -->
+    <h2>导航栏</h2>
+    <ul>
+      <!-- <li v-for="(item) in list" :key="item.id">
+        <RouterLink :to="`/list/demo1?id=${item.id}&user=${item.name}&sex=${item.sex}`">{{ item.name }}</RouterLink>
+      </li> -->
+      <li v-for="(item) in list" :key="item.id">
+        <RouterLink :to="{
+          name:'dier',
+          query:{
+            id:item.id,
+            user:item.name,
+            sex:item.sex
+          }
+        }">{{ item.name }}</RouterLink>
+      </li>
+    </ul>
     <div id="main">
       <RouterView></RouterView>
     </div>
@@ -13,6 +29,40 @@
 <script lang="ts" setup>
 import {ref,reactive} from "vue" 
 import { RouterView,RouterLink } from "vue-router";
+import { nanoid } from "nanoid";
+// interface
+let list = reactive([
+  {
+    id:nanoid(10),
+    name:'孙悟空',
+    sex:'男'
+  },
+  {
+    id:nanoid(10),
+    name:'猪八戒',
+    sex:'男'
+  },
+  {
+    id:nanoid(10),
+    name:'娜娜子',
+    sex:'女'
+  },
+  {
+    id:nanoid(10),
+    name:'小爱',
+    sex:'女'
+  },
+  {
+    id:nanoid(10),
+    name:'图图',
+    sex:'男'
+  },
+  {
+    id:nanoid(10),
+    name:'美羊羊',
+    sex:'女'
+  },
+])
 </script>
 
 <style lang="scss" scoped>

vue3/project4/src/views/params传参.vue

@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <h1>列表</h1>
+    <!-- 声明式导航 -->
+    <!-- <RouterLink to="/list/demo1">第一个</RouterLink>
+    <RouterLink to="/list/demo2">第二个</RouterLink> -->
+    <ul>
+      <!-- <li v-for="(item) in list" :key="item.id">
+        <RouterLink :to="`/list/demo1/${item.id}/${item.name}/${item.sex}`">{{ item.name }}</RouterLink>
+      </li> -->
+      <li v-for="(item) in list" :key="item.id">
+        <RouterLink :to="{
+          name:'dier',
+          params:{
+            user:item.name,
+            id:item.id,
+            sex:item.sex
+          }
+        }">{{ item.name }}</RouterLink>
+      </li>
+    </ul>
+    <div id="main">
+      <RouterView></RouterView>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive} from "vue" 
+import { RouterView,RouterLink } from "vue-router";
+import { nanoid } from "nanoid";
+// interface
+let list = reactive([
+  {
+    id:nanoid(10),
+    name:'孙悟空',
+    sex:'男'
+  },
+  {
+    id:nanoid(10),
+    name:'猪八戒',
+    sex:'男'
+  },
+  {
+    id:nanoid(10),
+    name:'娜娜子',
+    sex:'女'
+  },
+  {
+    id:nanoid(10),
+    name:'小爱',
+    sex:'女'
+  },
+  {
+    id:nanoid(10),
+    name:'图图',
+    sex:'男'
+  },
+  {
+    id:nanoid(10),
+    name:'美羊羊',
+    sex:'女'
+  },
+])
+</script>
+
+<style lang="scss" scoped>
+</style>