vue3

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

@@ -2,8 +2,22 @@
   <div>
     <h1>首页</h1>
     <RouterLink to="/home">主页</RouterLink>
-    <RouterLink to="/list">列表</RouterLink>
-    <RouterLink to="/my">我的</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>
 </template>

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

@@ -16,6 +16,7 @@ const router = createRouter({
         {
             path:'/list',
             component: List,
+            name:'liebiao',
             redirect:'/list/demo2',
             children:[
                 {
@@ -29,8 +30,10 @@ const router = createRouter({
             ]
         },
         {
-            path:'/my',
-            component: My
+            // path:'/my/:id/:names',
+            path:'/my/:ids',
+            component: My,
+            name: 'wode'
         }
     ]
 });

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

@@ -4,7 +4,9 @@
 
 <script lang="ts" setup>
 import {ref,reactive} from "vue" 
-
+import { useRoute } from "vue-router";
+let route = useRoute();
+console.log(route)
 </script>
 
 <style lang="scss" scoped>

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

@@ -6,7 +6,9 @@
 
 <script lang="ts" setup>
 import {ref,reactive} from "vue" 
-
+import { useRoute } from "vue-router";
+let route = useRoute();
+console.log(route)
 </script>
 
 <style lang="scss" scoped>