路由

20.vue3/project2/src/App.vue

@@ -1,14 +1,35 @@
 <template>
   <div>
     <div class="nav">
-      <RouterLink active-class="active" to="/home">主页</RouterLink>
+      <!-- query -->
+      <!-- <RouterLink active-class="active" to="/home?id=12&name=图图"
+        >主页</RouterLink
+      > -->
       <RouterLink
         active-class="active"
         :to="{
-          path: '/list',
+          path: '/home',
+          query: {
+            id: 21,
+            desc: '哈尔滨',
+          },
+        }"
+        >主页</RouterLink
+      >
+      <!-- params -->
+      <!-- <RouterLink active-class="active" to="/list/12/晴天">列表</RouterLink> -->
+      <RouterLink
+        active-class="active"
+        :to="{
+          name: 'liebiao',
+          params: {
+            id: 12,
+            weather: '晴天',
+          },
         }"
         >列表</RouterLink
       >
+      <div @click="goList">跳转</div>
       <RouterLink
         active-class="active"
         :to="{
@@ -17,13 +38,30 @@
         >我的</RouterLink
       >
     </div>
+    <!-- 
+      useRouter=>$router
+      useRoute => #route
+      query 和 params区别
+      1.url
+        /路径?id=xxx&name=xxx      /路径/xx/xxx
+      2.
+      对象传参不允许使用命名跳转      对象传参时使用命名路由
+      3.刷新
+
+    -->
     <RouterView></RouterView>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, reactive } from "vue";
-import { RouterView, RouterLink } from "vue-router";
+import { RouterView, RouterLink, useRouter } from "vue-router";
+const router = useRouter();
+const goList = () => {
+  router.push({
+    name: "liebiao",
+  });
+};
 </script>
 
 <style lang="scss" scoped>

20.vue3/project2/src/router/index.js

@@ -20,10 +20,13 @@ const router = createRouter({
             // 路径
             path: '/home',
             // 页面
-            component: Home
+            component: Home,
+            name: "主页"
         },
         {
+            // path: '/list/:id/:weather',
             path: '/list',
+            name: "liebiao",
             component: List,
             children: [
                 {

20.vue3/project2/src/views/Home.vue

@@ -4,6 +4,10 @@
 
 <script lang="ts" setup>
 import { ref, reactive } from "vue";
+import { useRoute } from "vue-router";
+// 接收参数
+const route = useRoute();
+console.log(route);
 </script>
 
 <style lang="scss" scoped>

20.vue3/project2/src/views/List.vue

@@ -11,6 +11,10 @@
 
 <script lang="ts" setup>
 import { ref, reactive } from "vue";
+import { useRoute } from "vue-router";
+// 接收参数
+const route = useRoute();
+console.log(route);
 </script>
 
 <style lang="scss" scoped>