路由

17.Vue3/project2/src/App.vue

@@ -2,25 +2,47 @@
   <div>
     <h1>App</h1>
     <!-- <router-view></router-view> -->
-     <div class="nav">
-      <RouterLink push active-class="news" to="/my">我的</RouterLink>
+    <div class="nav">
+      <!-- query传参 -->
+      <!-- <RouterLink push active-class="news" to="/my?name='aa&age=12'">我的</RouterLink> -->
+
+      <!-- <RouterLink push active-class="news" :to="{
+        name:'wode',
+        query:{
+          name:'bb',
+          age:18
+        }
+      }">我的</RouterLink> -->
+
+      <!-- params传参 -->
+      <!-- <RouterLink push active-class="news" :to="`/my/001/图图`">我的</RouterLink> -->
       <RouterLink push active-class="news" :to="{
-       name:'zhuye'
-      }">首页</RouterLink>
+        name:'wode',
+        params:{
+          id:'002',
+          name:'噜噜'
+        }
+      }">我的</RouterLink>
+      <RouterLink
+        push
+        active-class="news"
+        :to="{
+          name: 'zhuye',
+        }"
+        >首页</RouterLink
+      >
       <RouterLink push active-class="news" to="/list">列表</RouterLink>
-     </div>
+    </div>
     <RouterView></RouterView>
   </div>
 </template>
 
 <script>
-import {RouterView,RouterLink} from 'vue-router'
-export default {
-
-}
+import { RouterView, RouterLink } from "vue-router";
+export default {};
 </script>
 
-<style scoped> 
+<style scoped>
 .nav {
   width: 300px;
   display: flex;

17.Vue3/project2/src/router/index.js

@@ -31,8 +31,9 @@ const routes = [
         ]
     },
     {
-        path: "/my",
-        component: My
+        path: "/my/:id/:name",
+        component: My,
+        name:'wode'
     },
 ]
 

17.Vue3/project2/src/views/My.vue

@@ -3,8 +3,10 @@
 </template>
 
 <script lang="ts" setup>
-import {ref,reactive} from "vue" 
-
+import {ref,reactive} from "vue"
+import { useRoute } from "vue-router"; 
+const route = useRoute();
+console.log(route);
 </script>
 
 <style lang="scss" scoped>