路由

20.vue3/project2/src/App.vue

@@ -6,6 +6,7 @@
         >主页</RouterLink
       > -->
       <RouterLink
+        :push="true"
         active-class="active"
         :to="{
           path: '/home',
@@ -18,7 +19,9 @@
       >
       <!-- params -->
       <!-- <RouterLink active-class="active" to="/list/12/晴天">列表</RouterLink> -->
+      <!-- 声明式导航 -->
       <RouterLink
+        :push="true"
         active-class="active"
         :to="{
           name: 'liebiao',
@@ -31,6 +34,7 @@
       >
       <div @click="goList">跳转</div>
       <RouterLink
+        :push="true"
         active-class="active"
         :to="{
           name: 'wode',
@@ -58,9 +62,8 @@ import { ref, reactive } from "vue";
 import { RouterView, RouterLink, useRouter } from "vue-router";
 const router = useRouter();
 const goList = () => {
-  router.push({
-    name: "liebiao",
-  });
+  // 编程式导航
+  router.go(-1);
 };
 </script>
 

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

@@ -16,6 +16,10 @@ const router = createRouter({
 
     // 路由表
     routes: [
+        {
+            path: '/',
+            redirect: '/my'
+        },
         {
             // 路径
             path: '/home',
@@ -24,10 +28,11 @@ const router = createRouter({
             name: "主页"
         },
         {
-            // path: '/list/:id/:weather',
+            // path: '/list/:id2',
             path: '/list',
             name: "liebiao",
             component: List,
+            redirect: '/list/demo2',
             children: [
                 {
                     // /list/demo1

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

@@ -10,11 +10,26 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive } from "vue";
+import { nextTick } from "vue";
+import { ref, reactive, watch } from "vue";
 import { useRoute } from "vue-router";
 // 接收参数
 const route = useRoute();
-console.log(route);
+// watch(
+//   () => route.params,
+//   (val) => {
+//     if (val.id) {
+//       console.log(val, "val");
+//     }
+//   },
+//   {
+//     deep: true,
+//     immediate: true,
+//   }
+// );
+nextTick(() => {
+  console.log(route.params);
+});
 </script>
 
 <style lang="scss" scoped>