vue3

13.Vue3/my-Router/src/pages/Detail.vue

@@ -1,12 +1,22 @@
 <template>
   <div>
     详情
+    <p>
+        我叫：{{query.user}},我的id是{{query.id}}
+    </p>
   </div>
 </template>
 
 <script setup>
-import { ref, reactive} from 'vue'
-
+import { ref, reactive,toRefs} from 'vue'
+import {useRoute} from 'vue-router';
+const route = useRoute();
+// console.log(route);
+// let query = toRefs(route.query); X
+let {query} = toRefs(route);
+console.log(query);
+// console.log(user)
+// let user = toRefs(query)
 </script>
 <style lang='scss' scoped>
 

13.Vue3/my-Router/src/pages/List.vue

@@ -2,9 +2,28 @@
   <div class="list">
     <ul>
       <li v-for="(item, index) in list" :key="index">
-        <RouterLink active-class="active" to="/list/detail">{{
+        <!-- query传参  -->
+        <RouterLink active-class="active" :to="`/list/detail?id=${item.id}&user=${item.user}`">{{
           item.name
         }}</RouterLink>
+        <!-- <RouterLink active-class="active" :to="{
+          path:'/list/detail',
+          query:{
+            id:item.id,
+            user:item.user
+          }
+        }">{{
+          item.name
+        }}</RouterLink> -->
+        <!-- <RouterLink :to="{
+          name:'xiangqing',
+          query:{
+            id:item.id,
+            user:item.user
+          }
+        }">{{
+          item.name
+        }}</RouterLink> -->
       </li>
     </ul>
     <div class="main">

13.Vue3/my-Router/src/router/index.ts

@@ -30,7 +30,8 @@ const router = createRouter({
                 {
                     // 二级或多级 子路由 没有/
                     path:'detail',
-                    component:Detail
+                    component:Detail,
+                    name:'xiangqing'
                 }
             ]
         },