路由

17.Vue3/project2/src/components/Part1.vue

@@ -8,8 +8,17 @@
 </template>
 
 <script lang="ts" setup>
-import {ref,reactive} from "vue" 
+import {ref,reactive, onActivated, onDeactivated, onMounted} from "vue" 
 
+onMounted(()=>{
+    console.log("挂载");
+})
+onActivated(()=>{
+    console.log("激活");
+})
+onDeactivated(()=>{
+    console.log("停用");
+})
 </script>
 
 <style lang="scss" scoped>

17.Vue3/project2/src/router/index.js

@@ -35,10 +35,22 @@ const routes = [
         ]
     },
     {
-        path: "/my/:id/:name",
+        path: "/my",
+        // path: "/my/:id/:name",
         component: My,
-        meta: { isRequireAuth: true },
-        name: 'wode'
+        meta: { isRequireAuth: false },
+        name: 'wode',
+        // 1.传什么接受什么
+        props: false,
+        // 2. 默认传参
+        // props:{
+        //     id: "002",
+        //     name: "默认名字"    
+        // },
+        // // 3.修改接收方式 默认是params
+        // props(route) {
+        //     return route.query            
+        // }
     },
 ]
 

17.Vue3/project2/src/views/Home.vue

@@ -2,8 +2,10 @@
   <div>
     <h2>home</h2>
     <button @click="changeShow">切换</button>
-    <!-- include exclude -->
-    <KeepAlive :exclude="['Part1']">
+    <!-- include exclude
+    :include="['Part1']" 
+    -->
+    <KeepAlive>
       <Part1 v-if="isShow"></Part1>
       <Part2 v-else></Part2>
     </KeepAlive>

17.Vue3/project2/src/views/My.vue

@@ -1,12 +1,16 @@
 <template>
-  <div>my</div>
+  <div>
+    <h1>my</h1>
+    {{ id }} -- {{ name }}
+  </div>
 </template>
 
 <script lang="ts" setup>
 import {ref,reactive} from "vue"
 import { useRoute } from "vue-router"; 
 const route = useRoute();
-console.log(route);
+console.log(route,'route');
+defineProps(['id','name'])
 </script>
 
 <style lang="scss" scoped>