vue3

13.Vue3/my-Router/src/App.vue

@@ -3,15 +3,19 @@
     <h2>路由模块</h2>
     <div class="nav">
       <!-- router-link =>  RouterLink  =>a -->
-      <RouterLink replace active-class="active" to="/home">首页</RouterLink>
+      <!-- <RouterLink replace active-class="active" to="/home">首页</RouterLink>
       <RouterLink replace active-class="active" to="/list">列表</RouterLink>
       <RouterLink replace active-class="active" :to="{
         name:'wode'
-      }">我的</RouterLink>
+      }">我的</RouterLink> -->
+      <RouterLink replace active-class="active" to="/part1">demo1</RouterLink>
+      <RouterLink replace active-class="active" to="/part2">demo2</RouterLink>
     </div>
     <!-- 占位符 -->
     <div class="main">
-      <RouterView></RouterView>
+      <KeepAlive>
+        <RouterView></RouterView>
+      </KeepAlive>
     </div>
   </div>
 </template>

13.Vue3/my-Router/src/components/Demo1.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <h1>Demo1</h1>
+    <input type="text">
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive} from 'vue'
+
+</script>
+<style lang='scss' scoped>
+
+</style>

13.Vue3/my-Router/src/components/Demo2.vue

@@ -0,0 +1,15 @@
+<template>
+    <div>
+      <h1>Demo2</h1>
+      第二个
+      <!-- <input type="text"> -->
+    </div>
+  </template>
+  
+  <script setup>
+  import { ref, reactive} from 'vue'
+  
+  </script>
+  <style lang='scss' scoped>
+  
+  </style>

13.Vue3/my-Router/src/router/index.ts

@@ -9,7 +9,9 @@ import {
 import Home from "../views/Home.vue";
 import List from "../views/List.vue";
 import My from "../views/My.vue";
-import Detail from "../views/Detail.vue";
+import Part1 from "../views/part1.vue";
+import Part2 from "../views/Part2.vue";
+// import Detail from "";
 // 1.创建
 const router = createRouter({
   // 路由是什么版本
@@ -34,8 +36,8 @@ const router = createRouter({
         {
           // 二级或多级 子路由 没有/
           // path: "detail/:id/:user",
-          path:'/detail',
-          component: Detail,
+          path: "/detail",
+          component: () => import("../views/Detail.vue"),
           name: "xiangqing",
           // 1.全部接收
           // props:true,
@@ -44,10 +46,10 @@ const router = createRouter({
           //   return route.query
           // }
           // 3.默认传参
-          props:{
-            user:"我的",
-            id:"0976"
-          }
+          props: {
+            user: "我的",
+            id: "0976",
+          },
         },
       ],
     },
@@ -56,6 +58,16 @@ const router = createRouter({
       component: My,
       name: "wode",
     },
+    {
+      path: "/part1",
+      component: Part1,
+      name: "Part1",
+    },
+    {
+      path: "/part2",
+      component: Part2,
+      name: "Part2",
+    },
   ],
 });
 

13.Vue3/my-Router/src/views/Part1.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <h1>Part1</h1>
+    <button @click="changeMain">切换</button>
+    <!-- 
+        vue2:keep-alive
+    <keep-alive>
+        <Demo1 v-if="showMain"></Demo1>
+        <Demo2 v-else></Demo2>
+    </keep-alive> -->
+    <!-- <KeepAlive :include="['Demo2']" > -->
+    <!-- <KeepAlive :exclude="['Demo2']" > -->
+    <KeepAlive>
+        <Demo1 v-show="showMain"></Demo1>
+    </KeepAlive>
+    <!-- <component :is='currentComponent'></component> -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import Demo1 from "./components/Demo1.vue";
+import Demo2 from './components/Demo2.vue';
+import { ref, reactive, onMounted, onUnmounted } from "vue";
+let showMain = ref(true);
+let currentComponent = ref(Demo1);
+console.log(currentComponent, "currentComponent");
+onMounted(() => {
+  console.log("part1挂载了");
+});
+onUnmounted(() => {
+  console.log("part1卸载了");
+});
+function changeMain() {
+    showMain.value = !showMain.value
+    // currentComponent.value = JSON.stringify(currentComponent.value) === JSON.stringify(Demo1) ?Demo2:Demo1;
+}
+</script>
+<style lang="scss" scoped></style>

13.Vue3/my-Router/src/views/Part2.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <h1>Part2</h1>
+    <input type="text" />
+  </div>
+</template>
+
+<script setup name="Part2">
+import {
+  ref,
+  reactive,
+  onMounted,
+  onUnmounted,
+  onActivated,
+  onDeactivated,
+} from "vue";
+
+onActivated(() => {
+  console.log("你好");
+});
+onDeactivated(() => {
+  console.log("我不好");
+});
+</script>
+<style lang="scss" scoped></style>

13.Vue3/my-Router/src/views/components/Demo1.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <h1>Demo1</h1>
+    <input type="text">
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, onUnmounted,onActivated,onDeactivated } from "vue";
+onMounted(() => {
+  console.log("demo1挂载了");
+});
+onUnmounted(() => {
+  console.log("demo1卸载了");
+});
+onActivated(() => {
+  console.log("demo1激活了");
+});
+onDeactivated(() => {
+  console.log("哈哈哈哈");
+});
+
+</script>
+<style lang='scss' scoped>
+
+</style>

13.Vue3/my-Router/src/views/components/Demo2.vue

@@ -0,0 +1,15 @@
+<template>
+    <div>
+      <h1>Demo2</h1>
+      第二个
+      <input type="text">
+    </div>
+  </template>
+  
+  <script setup>
+  import { ref, reactive} from 'vue'
+  
+  </script>
+  <style lang='scss' scoped>
+  
+  </style>

13.Vue3/路由.md

@@ -67,4 +67,11 @@ useRouter() => router
 
 ## 18.replace与push区别
 
-## 19.keep-alive
+## 19.路由懒加载
+
+## 20.keep-alive
+内置组件 => 组件缓存
+提高性能减少不必要的组件销毁与重建
+有两个生命周期
+onActivated:组件激活时重新加载数据使用
+onDeactivated:组件激活时清理数据资源使用