路由

20.vue3/project2/src/App.vue

@@ -32,12 +32,12 @@
         }"
         >列表</RouterLink
       >
-      <div @click="goList">跳转</div>
+      <!-- <div @click="goList">跳转</div> -->
       <RouterLink
         :push="true"
         active-class="active"
         :to="{
-          name: 'wode',
+          name: 'My',
         }"
         >我的</RouterLink
       >
@@ -53,18 +53,37 @@
       3.刷新
 
     -->
-    <RouterView></RouterView>
+
+    <RouterView v-slot="{ Component, route }">
+      <KeepAlive :include="keepAliveComponent">
+        <component :is="Component" :key="route.path" />
+      </KeepAlive>
+    </RouterView>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive } from "vue";
+import { ref, reactive, computed } from "vue";
 import { RouterView, RouterLink, useRouter } from "vue-router";
 const router = useRouter();
+console.log(router);
 const goList = () => {
   // 编程式导航
-  router.go(-1);
+  // router.go(-1);
+  router.push({
+    name: "liebiao",
+    params: {
+      id: 12,
+    },
+  });
 };
+const keepAliveComponent = computed(() => {
+  return router
+    .getRoutes()
+    .filter((item) => item.meta?.keepAlive)
+    .map((item) => item.name);
+});
+console.log(keepAliveComponent.value);
 </script>
 
 <style lang="scss" scoped>

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

@@ -25,7 +25,8 @@ const router = createRouter({
             path: '/home',
             // 页面
             component: Home,
-            name: "主页"
+            name: "Home",
+            meta: { keepAlive: true }
         },
         {
             // path: '/list/:id2',
@@ -49,7 +50,10 @@ const router = createRouter({
         {
             path: '/my',
             component: My,
-            name: 'wode'
+            name: 'My',
+            meta: {
+                keepAlive: true
+            }
         }
     ]
 })

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

@@ -1,9 +1,17 @@
 <template>
-  <div>Demo1</div>
+  <div>
+    Demo1
+    <br />
+    用户名: <input type="text" v-model="username" />
+    <br />
+    密码: <input type="password" v-model="password" />
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive } from "vue";
+import { ref, reactive, onActivated, onDeactivated } from "vue";
+let username = ref("");
+let password = ref("");
 </script>
 
 <style lang="scss" scoped>

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

@@ -1,9 +1,27 @@
 <template>
-  <div>Demo2</div>
+  <div>
+    Demo2
+    <br />
+    用户名: <input type="text" v-model="username" />
+    <br />
+    密码: <input type="password" v-model="password" />
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive } from "vue";
+import { ref, onActivated, onDeactivated, onMounted } from "vue";
+let username = ref("");
+let password = ref("");
+console.log("执行");
+onMounted(() => {
+  console.log("挂载");
+});
+onActivated(() => {
+  console.log("激活");
+});
+onDeactivated(() => {
+  console.log("页面离开 失活");
+});
 </script>
 
 <style lang="scss" scoped>

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

@@ -1,5 +1,9 @@
 <template>
-  <div>首页</div>
+  <div>
+    首页
+    <br />
+    <input type="text" />
+  </div>
 </template>
 
 <script lang="ts" setup>

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

@@ -5,7 +5,11 @@
       <RouterLink to="/list/demo1">Demo1</RouterLink>
       <RouterLink to="/list/demo2">Demo2</RouterLink>
     </div>
-    <RouterView></RouterView>
+    <RouterView v-slot="{ Component }">
+      <KeepAlive include="Demo1" :max="3">
+        <component :is="Component" />
+      </KeepAlive>
+    </RouterView>
   </div>
 </template>
 
@@ -27,9 +31,8 @@ const route = useRoute();
 //     immediate: true,
 //   }
 // );
-nextTick(() => {
-  console.log(route.params);
-});
+console.log(route.params);
+nextTick(() => {});
 </script>
 
 <style lang="scss" scoped>

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

@@ -1,5 +1,8 @@
 <template>
-  <div>我的</div>
+  <div>
+    我的
+    <input type="text" />
+  </div>
 </template>
 
 <script lang="ts" setup>