vue3

16.vue3/project2/src/views/Demo1.vue

@@ -1,14 +1,33 @@
 <template>
   <div>
     <h1>Demo1</h1>
+    <input type="text" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive } from "vue";
-import { useRoute } from "vue-router";
+import { ref, reactive, onActivated, onDeactivated } from "vue";
+import { useRoute, onBeforeRouteLeave, onBeforeRouteUpdate } from "vue-router";
 const route = useRoute();
-console.log(route);
+// console.log(route);
+// onBeforeRouteLeave((to, from, next) => {
+//   console.log("离开", to);
+//   const token = localStorage.getItem("token");
+//   if (token) next();
+// });
+// onBeforeRouteEnter((to, from, next) => {
+//   console.log("进入", to);
+//   next();
+// });
+// onBeforeRouteUpdate((to, from, next) => {
+//   console.log("更新", to);
+// });
+onActivated(() => {
+  console.log("组件被激活", "1");
+});
+onDeactivated(() => {
+  console.log("组件失活", "1");
+});
 </script>
 
 <style lang="scss" scoped>

16.vue3/project2/src/views/Demo2.vue

@@ -1,14 +1,32 @@
 <template>
   <div>
     <h1>Demo2</h1>
+    <input type="text" />
+    <button @click="handleClick">回去</button>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive } from "vue";
-import { useRoute } from "vue-router";
+import { ref, reactive, onActivated, onDeactivated } from "vue";
+import { useRoute, useRouter } from "vue-router";
 const route = useRoute();
+const router = useRouter();
 console.log(route, "demo2");
+const handleClick = () => {
+  router.push({
+    path: "/list/demo1",
+    query: {
+      name: "aaa",
+      id: 12,
+    },
+  });
+};
+onActivated(() => {
+  console.log("组件被激活", "2");
+});
+onDeactivated(() => {
+  console.log("组件失活", "2");
+});
 </script>
 
 <style lang="scss" scoped>

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

@@ -24,7 +24,11 @@
     >
     <!-- <RouterLink :to="`/list/demo2/图图`">第二个</RouterLink> -->
     <div class="main">
-      <RouterView></RouterView>
+      <RouterView v-slot="{ Component }">
+        <KeepAlive :exclude="['Demo1']">
+          <Component :is="Component" />
+        </KeepAlive>
+      </RouterView>
     </div>
   </div>
 </template>