vue3

vue3/my-Router/package-lock.json

@@ -8,6 +8,7 @@
       "name": "my-router",
       "version": "0.0.0",
       "dependencies": {
+        "vite-plugin-vue-setup-extend": "^0.4.0",
         "vue": "^3.4.21",
         "vue-router": "^4.3.2"
       },
@@ -40,7 +41,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "aix"
@@ -56,7 +56,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -72,7 +71,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -88,7 +86,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -104,7 +101,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -120,7 +116,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -136,7 +131,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -152,7 +146,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -168,7 +161,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -184,7 +176,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -200,7 +191,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -216,7 +206,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -232,7 +221,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -248,7 +236,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -264,7 +251,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -280,7 +266,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -296,7 +281,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -312,7 +296,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "netbsd"
@@ -328,7 +311,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "openbsd"
@@ -344,7 +326,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "sunos"
@@ -360,7 +341,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -376,7 +356,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -392,7 +371,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -413,7 +391,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -426,7 +403,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -439,7 +415,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -452,7 +427,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -465,7 +439,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -478,7 +451,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -491,7 +463,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -504,7 +475,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -517,7 +487,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -530,7 +499,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -543,7 +511,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -556,7 +523,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -569,7 +535,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -582,7 +547,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -595,7 +559,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -608,7 +571,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -623,14 +585,13 @@
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.5.tgz",
-      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
-      "dev": true
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
     },
     "node_modules/@types/node": {
       "version": "20.12.12",
       "resolved": "https://registry.npmmirror.com/@types/node/-/node-20.12.12.tgz",
       "integrity": "sha512-eWLDGF/FOSPtAvEqeRAQ4C8LSA7M1I7i0ky1I8U7kD1J5ITyW3AsRhQrKVoWf5pFKZ2kILsEGJhsI9r93PYnOw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "undici-types": "~5.26.4"
       }
@@ -873,7 +834,6 @@
       "version": "0.20.2",
       "resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.20.2.tgz",
       "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
-      "dev": true,
       "hasInstallScript": true,
       "bin": {
         "esbuild": "bin/esbuild"
@@ -916,7 +876,6 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -1115,7 +1074,6 @@
       "version": "4.18.0",
       "resolved": "https://registry.npmmirror.com/rollup/-/rollup-4.18.0.tgz",
       "integrity": "sha512-QmJz14PX3rzbJCN1SG4Xe/bAAX2a6NpCP8ab2vfu2GiUr8AQcr2nCV/oEO3yneFarB67zk8ShlIyWb2LGTb3Sg==",
-      "dev": true,
       "dependencies": {
         "@types/estree": "1.0.5"
       },
@@ -1196,6 +1154,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/sourcemap-codec": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmmirror.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "deprecated": "Please use @jridgewell/sourcemap-codec instead"
+    },
     "node_modules/typescript": {
       "version": "5.4.5",
       "resolved": "https://registry.npmmirror.com/typescript/-/typescript-5.4.5.tgz",
@@ -1213,13 +1177,12 @@
       "version": "5.26.5",
       "resolved": "https://registry.npmmirror.com/undici-types/-/undici-types-5.26.5.tgz",
       "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/vite": {
       "version": "5.2.11",
       "resolved": "https://registry.npmmirror.com/vite/-/vite-5.2.11.tgz",
       "integrity": "sha512-HndV31LWW05i1BLPMUCE1B9E9GFbOu1MbenhS58FuK6owSO5qHm7GiCotrNY1YE5rMeQSFBGmT5ZaLEjFizgiQ==",
-      "dev": true,
       "dependencies": {
         "esbuild": "^0.20.1",
         "postcss": "^8.4.38",
@@ -1270,6 +1233,26 @@
         }
       }
     },
+    "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",
+      "integrity": "sha512-WMbjPCui75fboFoUTHhdbXzu4Y/bJMv5N9QT9a7do3wNMNHHqrk+Tn2jrSJU0LS5fGl/EG+FEDBYVUeWIkDqXQ==",
+      "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.npmmirror.com/magic-string/-/magic-string-0.25.9.tgz",
+      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "dependencies": {
+        "sourcemap-codec": "^1.4.8"
+      }
+    },
     "node_modules/vue": {
       "version": "3.4.27",
       "resolved": "https://registry.npmmirror.com/vue/-/vue-3.4.27.tgz",

vue3/my-Router/package.json

@@ -11,6 +11,7 @@
     "type-check": "vue-tsc --build --force"
   },
   "dependencies": {
+    "vite-plugin-vue-setup-extend": "^0.4.0",
     "vue": "^3.4.21",
     "vue-router": "^4.3.2"
   },

vue3/my-Router/query传参/1.vue

@@ -0,0 +1,76 @@
+<template>
+    <div class="list">
+      <ul>
+          <li v-for="(item,index) in gameList" :key="index">
+          <!-- query传参 -->
+              <!-- 第一种 -->
+              <!-- <RouterLink :to="`/list/detail?id=${item.id}&name=${item.name}&user=${item.user}&password=${item.password}`" active-class="active">{{ item.name }}</RouterLink> -->
+              <!-- 第二种 -->
+              <!-- <RouterLink :to="{
+                  name:'details',
+                  query:{
+                      id:item.id,
+                      name:item.name,
+                      user:item.user,
+                      password:item.password
+                  }
+              }">{{ item.name }}</RouterLink> -->
+          </li>
+        <!-- <li><RouterLink active-class="active" to="/list/detail">愤怒的小鸟</RouterLink></li>
+        <li><RouterLink active-class="active" to="/list/detail">植物大战僵尸</RouterLink></li>
+        <li><RouterLink active-class="active" to="/list/detail">超级马里奥</RouterLink></li>
+        <li><RouterLink active-class="active" to="/list/detail">黄金矿工</RouterLink></li>
+        <li><RouterLink active-class="active" to="/list/detail">森林冰火人</RouterLink></li>
+        <li><RouterLink active-class="active" to="/list/detail">赛尔号</RouterLink></li> -->
+      </ul>
+      <div class="main">
+          <RouterView></RouterView>
+          <!-- <Detail/> -->
+      </div>
+    </div>
+  </template>
+  
+  <script lang="ts" setup name="List">
+  import {RouterView,RouterLink} from 'vue-router'
+      // import Detail from './Detail.vue'
+  let gameList = [
+      {id:1,name:'愤怒的小鸟',user:"小艾",password:"123456"},
+      {id:1,name:'植物大战僵尸',user:"小赵",password:"999999"},
+      {id:1,name:'超级马里奥',user:"小玉",password:"888888"},
+      {id:1,name:'黄金矿工',user:"小段",password:"999999"},
+      {id:1,name:'森林冰火人',user:"小郑",password:"000000"},
+      {id:1,name:'赛尔号',user:"小马",password:"666666"},
+  ]
+  </script>
+  
+  <style scoped>
+  * {
+      text-decoration: none;
+  }
+  .list {
+      overflow: hidden;
+  }
+  .list ul {
+    float: left;
+    list-style: none;
+  }
+  
+  li {
+    width: 200px;
+    text-align: center;
+    padding: 20px;
+    border: 1px solid #ccc;
+  }
+  .main {
+      width: 1500px;
+      height: 500px;
+      margin-left: 30px;
+      margin-top: 40px;
+      border:1px solid #f00;
+      float: left;
+  }
+  .active {
+      color:#f00;
+  }
+  </style>
+  

vue3/my-Router/src/App.vue

@@ -2,9 +2,13 @@
   <div class="app">
     <h2>路由模块</h2>
     <div class="nav">
-      <RouterLink active-class="active" to="/home">首页</RouterLink>
+      <RouterLink active-class="active" :to="{
+        path:'/home'
+      }">首页</RouterLink>
       <RouterLink active-class="active" to="/list">列表</RouterLink>
-      <RouterLink active-class="active" to="/my">我的</RouterLink>
+      <RouterLink active-class="active" :to="{
+        name:'my1'
+      }">我的</RouterLink>
     </div>
     <div class="main">
       <RouterView></RouterView>

vue3/my-Router/src/pages/Detail.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="detail">
+    <h2>详情信息</h2>
+    <ol>
+        <li>游戏名:{{route.params.name}}</li>
+        <li>用户名:{{route.params.user}}</li>
+        <li>用户密码:{{route.params.password}}</li>
+    </ol>
+  </div>
+</template>
+
+<script setup name="Detail" lang="ts">
+// route router
+import {useRoute} from 'vue-router';
+import {toRefs} from 'vue';
+let route = useRoute();
+console.log(route.params)
+// console.log(route.query)
+// let query = toRefs(route.query)
+// console.log(query)
+
+</script>
+
+<style>
+
+</style>

vue3/my-Router/src/pages/List.vue

@@ -1,14 +1,71 @@
 <template>
-    <div class="list">
-        我是列表
+  <div class="list">
+    <ul>
+        <li v-for="(item,index) in gameList" :key="index">
+            <!-- params传参 -->
+            <!-- 第一种 -->
+            <!-- <RouterLink
+                :to="`/list/detail/${item.id}/${item.name}/${item.user}/${item.password}`"
+            >{{ item.name }}</RouterLink> -->
+            <!-- 第二种:params传参对象写法 只能使用name不能使用path -->
+            <RouterLink :to="{
+                name:'details',
+                params:{
+                    id:item.id,
+                    name:item.name,
+                    user:item.user,
+                    password:item.password
+                }
+            }">{{ item.name }}</RouterLink>
+        </li>
+    </ul>
+    <div class="main">
+        <RouterView></RouterView>
+        <!-- <Detail/> -->
     </div>
+  </div>
 </template>
 
 <script lang="ts" setup name="List">
-
+import {RouterView,RouterLink} from 'vue-router'
+    // import Detail from './Detail.vue'
+let gameList = [
+    {id:1,name:'愤怒的小鸟',user:"小艾",password:"123456"},
+    {id:1,name:'植物大战僵尸',user:"小赵",password:"999999"},
+    {id:1,name:'超级马里奥',user:"小玉",password:"888888"},
+    {id:1,name:'黄金矿工',user:"小段",password:"999999"},
+    {id:1,name:'森林冰火人',user:"小郑",password:"000000"},
+    {id:1,name:'赛尔号',user:"小马",password:"666666"},
+]
 </script>
 
-<style lang="scss" scoped>
-
+<style scoped>
+* {
+    text-decoration: none;
+}
+.list {
+    overflow: hidden;
+}
+.list ul {
+  float: left;
+  list-style: none;
+}
 
-</style>
+li {
+  width: 200px;
+  text-align: center;
+  padding: 20px;
+  border: 1px solid #ccc;
+}
+.main {
+    width: 1500px;
+    height: 500px;
+    margin-left: 30px;
+    margin-top: 40px;
+    border:1px solid #f00;
+    float: left;
+}
+.active {
+    color:#f00;
+}
+</style>

vue3/my-Router/src/router/index.ts

@@ -1,8 +1,9 @@
 import {createRouter,createWebHistory,createWebHashHistory} from 'vue-router';
 // 1.引入
-import Home from '@/pages/Home.vue'
-import List from '@/pages/List.vue'
-import My from '@/pages/My.vue'
+import Home from '../pages/Home.vue';
+import List from '@/pages/List.vue';
+import My from '@/pages/My.vue';
+import Detail from '@/pages/Detail.vue'
 // 创建
 const router = createRouter({
     history: createWebHashHistory(),
@@ -12,10 +13,20 @@ const router = createRouter({
             component:Home
         },
         {
+            name:"list1",
             path:'/list',
-            component:List
+            component:List,
+            children:[
+                {
+                    name:'details',
+                    // params传参
+                    path:'detail/:id/:name/:user/:password',
+                    component:Detail
+                }
+            ]
         },
         {
+            name:"my1",
             path:'/my',
             component:My
         }