路由

20.vue3/project2/src/App.vue

@@ -61,12 +61,12 @@
       3.刷新
 
     -->
-    <RouterView></RouterView>
     <!-- <RouterView v-slot="{ Component, route }">
       <KeepAlive :include="keepAliveComponent">
         <component :is="Component" :key="route.path" />
       </KeepAlive>
     </RouterView> -->
+    <RouterView></RouterView>
   </div>
 </template>
 

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

@@ -1,21 +1,28 @@
 <template>
-  <div>详情</div>
+  <div>
+    <h2>详情页 - 当前ID: {{ route.params.id }}</h2>
+    <!-- 在同一组件间跳转，触发 onBeforeRouteUpdate -->
+    <div style="margin-top: 20px; display: flex; gap: 10px">
+      <RouterLink :to="{ name: 'detail', params: { id: 1 } }">详情1</RouterLink>
+      <RouterLink :to="{ name: 'detail', params: { id: 2 } }">详情2</RouterLink>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive } from "vue";
-import { useRoute } from "vue-router";
-import { onBeforeRouteUpdate } from "vue-router";
+import { useRoute, onBeforeRouteUpdate, RouterLink } from "vue-router";
 
 const route = useRoute();
-// console.log(route.params.id);
+
 const init = (id: any) => {
   console.log(id, "用户id");
 };
 init(route.params.id);
+
+// 去掉 return false，导航才能正常进行
 onBeforeRouteUpdate((to) => {
   console.log(to, "最新");
-  return false;
+  //   init(to.params.id);
 });
 </script>