diff --git "a/\347\275\227\347\232\223\346\231\250/20260424-Vue\346\214\207\344\273\244.md" "b/\347\275\227\347\232\223\346\231\250/20260424-Vue\346\214\207\344\273\244.md"
index 4b9f09071fcf1280194a9ea6a7de36504c171679..9ede70f097f17389e64e9db216bae28aa4524904 100644
--- "a/\347\275\227\347\232\223\346\231\250/20260424-Vue\346\214\207\344\273\244.md"
+++ "b/\347\275\227\347\232\223\346\231\250/20260424-Vue\346\214\207\344\273\244.md"
@@ -1,16 +1,15 @@
 ## 笔记
-
 ### 指令基础
-
 - 指令：Vue 中以 `v-` 开头的特殊属性，用于**操作DOM、控制视图、绑定数据、绑定事件**
 - 语法：`v-指令名="数据/表达式"`
 - 优势：数据驱动视图，无需手动操作DOM
 
----
-
 ### 内容渲染指令
 #### v-text
-- 作用：渲染**纯文本**，覆盖标签内容，不解析HTML
+- 渲染**纯文本**内容
+- 会覆盖标签内部原有所有内容
+- 不解析 HTML 标签，只展示文本
+
 ```vue
 <template>
   <div v-text="msg"></div>
@@ -23,40 +22,50 @@ const msg = ref('学习Vue指令')
 ```
 
 #### v-html
-- 作用：渲染**HTML标签**
-- 注意：有XSS风险，不渲染用户输入内容
+- 渲染包含 HTML 标签的字符串内容
+- 会解析标签并生成对应 DOM 结构
+- 存在 XSS 安全风险，不可渲染用户输入内容
+
 ```vue
 <template>
   <div v-html="htmlStr"></div>
 </template>
 
 <script setup>
+import { ref } from 'vue'
 const htmlStr = ref('<h3 style="color:red">红色标题</h3>')
 </script>
 ```
 
 #### v-once
-- 作用：**只渲染一次**，数据更新视图不变
+- 元素**只进行初次渲染**
+- 数据后续更新，视图不会重新渲染
+- 用于优化不需要更新的静态内容
+
 ```vue
 <div v-once>{{ num }}</div>
 ```
 
 #### v-pre
-- 作用：跳过编译，原样显示内容
+- 跳过当前节点的编译过程
+- 标签内内容**原样输出**，不解析插值语法
+- 用于展示原始代码片段
+
 ```vue
 <div v-pre>{{ 不解析 }}</div>
 ```
 
----
-
 ### 条件渲染指令
 #### v-if / v-else-if / v-else
-- 原理：不满足条件**直接销毁DOM**
+- 根据条件**动态创建/销毁 DOM**
+- 条件不成立时，元素直接从页面移除
+- 多分支指令必须**连续书写**，不能被其他标签打断
+
 ```vue
 <template>
   <div v-if="score >= 90">优秀</div>
   <div v-else-if="score >= 60">合格</div>
-  <div v-else">不及格</div>
+  <div v-else>不及格</div>
 </template>
 
 <script setup>
@@ -66,8 +75,11 @@ const score = ref(80)
 ```
 
 #### v-show
-- 原理：用CSS `display` 隐藏，**DOM保留**
-- 适合：频繁切换
+- 根据条件**控制元素显示隐藏**
+- 底层使用 CSS `display:none` 实现隐藏
+- DOM 元素始终保留在页面中
+- 适合**频繁切换**显示状态的场景
+
 ```vue
 <template>
   <div v-show="isShow">显示隐藏内容</div>
@@ -79,15 +91,16 @@ const isShow = ref(true)
 </script>
 ```
 
----
-
 ### 循环指令 v-for
-
-- 作用：遍历数据渲染列表
-
-- 必须加 **:key**
+- 遍历数组/对象数据，循环渲染列表结构
+- 必须配合 `:key` 属性使用，保证列表更新性能
+- 支持遍历数组、对象、数字等多种数据类型
 
 #### 遍历数组
+- 语法：`(item, index) in 数组`
+- item：当前遍历项
+- index：当前项索引值
+
 ```vue
 <template>
   <ul>
@@ -104,6 +117,10 @@ const list = ref(['Vue', 'React', '小程序'])
 ```
 
 #### 遍历对象
+- 语法：`(value, key) in 对象`
+- value：对象属性值
+- key：对象属性名
+
 ```vue
 <template>
   <div v-for="(value, key) in user" :key="key">
@@ -121,14 +138,14 @@ const user = reactive({
 </script>
 ```
 
----
-
 ### 属性绑定v-bind
-
-- 简写：`:`
-- 作用：动态绑定标签原生属性、class 类名、行内 style 样式
+- 官方简写：`:`
+- 动态绑定标签原生属性、class、style
+- 绑定后属性值可使用变量、表达式
 
 #### 基础属性绑定
+- 支持 src、title、href、disabled 等所有原生属性
+- 动态数据变化，属性自动更新
 
 ```vue
 <template>
@@ -144,8 +161,10 @@ const tip = ref('悬浮查看提示信息')
 ```
 
 #### 动态绑定 class
-
-**对象写法：控制类名显示 / 隐藏**
+**对象写法**
+- 语法：`{ 类名: 布尔值 }`
+- 布尔值为 true 时，添加对应类名
+- 可同时控制多个类名的显示隐藏
 
 ```vue
 <template>
@@ -154,7 +173,6 @@ const tip = ref('悬浮查看提示信息')
 
 <script setup>
 import { ref } from 'vue'
-// 布尔值为true则添加对应类名
 const isActive = ref(true)
 const isBold = ref(false)
 </script>
@@ -165,7 +183,10 @@ const isBold = ref(false)
 </style>
 ```
 
- **数组写法：批量绑定多个固定类名**
+**数组写法**
+- 批量绑定多个固定类名
+- 直接传入类名变量/字符串
+- 类名会全部生效展示
 
 ```vue
 <template>
@@ -184,8 +205,10 @@ const boxSize = 'font-16'
 ```
 
 #### 动态绑定 style
-
-**对象写法：常用，动态控制行内样式**
+**对象写法**
+- 语法：`{ css属性名: 属性值 }`
+- css 属性名采用小驼峰命名
+- 适合动态控制单个/多个样式
 
 ```vue
 <template>
@@ -198,7 +221,10 @@ const textColor = ref('#f56c6c')
 </script>
 ```
 
-**数组写法：合并多个样式对象**
+**数组写法**
+- 绑定多个样式对象
+- 多个样式会自动合并生效
+- 适合样式分模块定义场景
 
 ```vue
 <template>
@@ -212,10 +238,14 @@ const styleTwo = { padding: '10px', border: '1px solid #ccc' }
 ```
 
 ### 事件绑定 v-on
-- 简写：`@`
-- 作用：绑定**页面原生事件**，触发 methods/setup 函数
+- 官方简写：`@`
+- 绑定原生 DOM 事件，触发对应函数执行
+- 支持自定义传参、事件对象、修饰符
 
 #### 事件传参
+- 函数后加括号，可传递自定义参数
+- 支持传递数字、字符串、变量等类型
+
 ```vue
 <template>
   <button @click="add(5)">点击+5</button>
@@ -231,6 +261,9 @@ const add = (num) => {
 ```
 
 #### 获取原生事件对象 $event
+- 使用 `$event` 传递原生事件对象
+- 可获取事件源、阻止默认行为等
+
 ```vue
 <template>
   <button @click="getEvent($event)">获取事件对象</button>
@@ -238,43 +271,37 @@ const add = (num) => {
 
 <script setup>
 const getEvent = (e) => {
-  console.log(e.target) // 当前点击DOM元素
+  console.log(e.target)
 }
 </script>
 ```
 
-#### 完整常用修饰符
-```bash
-@click.prevent   阻止标签默认行为
-@click.stop      阻止事件冒泡
-@click.once      事件只触发一次
-@click.self      仅点击自身元素才触发
-@click.capture   捕获模式执行
-
-@keyup.enter     回车按键触发
-@keyup.esc       返回退出触发
-```
+#### 常用事件修饰符
+- `@click.prevent` 阻止标签默认行为
+- `@click.stop` 阻止事件冒泡
+- `@click.once` 事件只触发一次
+- `@click.self` 仅点击自身触发事件
+- `@click.capture` 事件采用捕获模式
+- `@keyup.enter` 回车按键触发
+- `@keyup.esc` esc 按键触发
 
 #### 常用原生事件
-```txt
-@input    输入实时触发
-@change   值改变且失焦触发
-@blur     失去焦点
-@focus    获得焦点
-@submit   表单提交
-@mouseover 鼠标移入
-@mouseout  鼠标移出
-```
-
----
+- `@input` 输入框实时输入触发
+- `@change` 值改变且失焦后触发
+- `@blur` 输入框失去焦点触发
+- `@focus` 输入框获得焦点触发
+- `@submit` 表单提交触发
+- `@mouseover` 鼠标移入触发
+- `@mouseout` 鼠标移出触发
 
 ### 双向绑定 v-model 
-- 作用：表单元素 **数据 <=> 视图 双向同步**
-- 本质：语法糖 = `:value` 绑定 + `@input` 事件
+- 用于表单元素，实现**数据 ↔ 视图双向同步**
+- 视图修改 → 数据自动更新
+- 数据修改 → 视图自动更新
+- 底层语法糖：`value` 绑定 + `input` 事件
 
 #### 多表单元素支持
 **文本域 textarea**
-
 ```vue
 <template>
   <textarea v-model="desc"></textarea>
@@ -287,7 +314,6 @@ const desc = ref('')
 ```
 
 **下拉选择 select**
-
 ```vue
 <template>
   <select v-model="city">
@@ -302,8 +328,7 @@ const city = ref('beijing')
 </script>
 ```
 
-**复选框 / 单选框**
-
+**单选框、复选框**
 ```vue
 <!-- 单选框 -->
 <input type="radio" v-model="gender" value="男">男
@@ -313,18 +338,111 @@ const city = ref('beijing')
 <input type="checkbox" v-model="hobby" value="打球">打球
 ```
 
-#### 修饰符组合使用
+#### 修饰符使用
+- `.trim` 去除内容首尾空格
+- `.number` 将输入内容转为数字类型
+- `.lazy` 失去焦点后再同步数据
+- 多个修饰符可组合使用
+
 ```vue
-<!-- 先去首尾空格，再转为数字类型 -->
 <input v-model.trim.number="age" />
-
-<!-- 失去焦点后才同步数据 -->
 <input v-model.lazy="username" />
 ```
 
 #### v-model 底层原理
+- 等价于 `:value` 绑定数据
+- 配合 `@input` 事件更新数据
+- 底层实现：`username = $event.target.value`
+
 ```vue
-<!-- v-model 等价写法 -->
 <input :value="username" @input="username = $event.target.value" />
 ```
 
+## 作业
+```vue
+<script setup lang="ts">
+import { ref, type Ref } from 'vue';
+
+let url = "https://vuejs.org"
+let textClass = { highlight: true }
+let isReadonly: Ref<boolean> = ref(false)
+let isActive = ref(false)
+let hasError = ref(true)
+let fontColor = 'red'
+let fontSize = 24
+
+interface Article {
+    id: number,
+    isFeatured: boolean,
+    thumbnail: string,
+    title: string,
+    category: string,
+    author: string,
+    publishTime: Date
+}
+let article: Article = {
+    id: 0,
+    isFeatured: true,
+    thumbnail: 'https://lf-flow-web-cdn.doubao.com/obj/flow-doubao/doubao/web/doubao_avatar.png',
+    title: '我是标题',
+    category: '种类1',
+    author: '我是作者',
+    publishTime: new Date
+}
+
+function getTagColor(category: string) {
+    if (category === "种类1") {
+        return 'red'
+    } else {
+        return 'blue'
+    }
+}
+function formatDate(date: Date) {
+    return date
+}
+</script>
+
+<template>
+    <a v-bind:href="url">访问链接</a>
+    <p v-bind:class="textClass">这是一段文本</p>
+    <input type="text" v-bind:disabled="isReadonly" />
+    <div v-bind:class="{ active: isActive, 'text-danger': hasError }">动态Class</div>
+    <div v-bind:style="{ color: fontColor, fontSize: fontSize + 'px' }">样式文本</div>
+
+    <div class="news-card" :class="{ featured: article.isFeatured }">
+        <img :src="article.thumbnail" :alt="article.title" />
+        <div class="content">
+            <span class="tag" :style="{ backgroundColor: getTagColor(article.category) }">
+                {{ article.category }}
+            </span>
+            <h3 :class="{ 'highlight-title': article.isFeatured }">
+                {{ article.title }}
+            </h3>
+            <p class="meta">
+                <span>
+                    {{ article.author }}
+                </span>
+                <span>
+                    {{ formatDate(article.publishTime) }}
+                </span>
+            </p>
+            <a :href="'/article/' + article.id" class="read-more">阅读更多</a>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.highlight {
+    color: blue;
+    font-weight: bold;
+}
+
+.active {
+    background-color: red;
+}
+
+.text-danger {
+    background-color: yellow;
+}
+</style>
+```
diff --git "a/\347\275\227\347\232\223\346\231\250/20260429-Vue\344\272\213\344\273\266\347\273\221\345\256\232&\345\217\214\345\220\221\347\273\221\345\256\232.md" "b/\347\275\227\347\232\223\346\231\250/20260429-Vue\345\276\205\344\277\256\346\224\271\345\272\237\346\241\21001.md"
similarity index 100%
rename from "\347\275\227\347\232\223\346\231\250/20260429-Vue\344\272\213\344\273\266\347\273\221\345\256\232&\345\217\214\345\220\221\347\273\221\345\256\232.md"
rename to "\347\275\227\347\232\223\346\231\250/20260429-Vue\345\276\205\344\277\256\346\224\271\345\272\237\346\241\21001.md"
diff --git "a/\347\275\227\347\232\223\346\231\250/20260430-Vue.md" "b/\347\275\227\347\232\223\346\231\250/20260430-Vue\345\276\205\344\277\256\346\224\271\345\272\237\346\241\21002.md"
similarity index 100%
rename from "\347\275\227\347\232\223\346\231\250/20260430-Vue.md"
rename to "\347\275\227\347\232\223\346\231\250/20260430-Vue\345\276\205\344\277\256\346\224\271\345\272\237\346\241\21002.md"
diff --git "a/\347\275\227\347\232\223\346\231\250/20260506-Vue\347\273\203\344\271\240.md" "b/\347\275\227\347\232\223\346\231\250/20260506-Vue\347\273\203\344\271\240.md"
new file mode 100644
index 0000000000000000000000000000000000000000..a487dca50327efa475b32ebb8c79329f46fe0872
--- /dev/null
+++ "b/\347\275\227\347\232\223\346\231\250/20260506-Vue\347\273\203\344\271\240.md"
@@ -0,0 +1,48 @@
+```vue
+<script setup lang="ts">
+import { Ref, ref } from 'vue';
+
+let message: Ref<string> = ref("欢迎学习Vue3")
+let htmlContent = ref("<h2 style='color:red;'>重要提示</h2><p>请认真完成练习</p>")
+let username = ref("张三")
+let price = 29.9
+let quantity = 3
+
+let createTime = Date.now()
+function formatDate(timestamp: number): Date {
+  let date = new Date(timestamp)
+  return date
+}
+let fullName = "vue3 framework"
+
+let user = {
+  name: "name",
+  title: "title",
+  company: "company", 
+  registerTime : Date.now()
+
+}
+</script>
+
+<template>
+  <div id="app">
+    <p v-text="message"></p>
+  </div>
+  <div id="app">
+    <div v-html="htmlContent"></div>
+  </div>
+  <span>{{ username }}，您好！</span>
+  <p>商品总价：{{ price * quantity }} 元</p>
+  <span>{{ formatDate(createTime) }}</span>
+  <div>{{ fullName.toUpperCase() }}</div>
+  <div class="card">
+
+    <h2>{{ user.name }}</h2>
+    <p>职位：{{ user.title }}</p>
+    <p>公司：{{ user.company }}</p>
+    <p>注册时间：{{ formatDate(user.registerTime) }}</p>
+  </div>
+</template>
+
+```
+
diff --git "a/\347\275\227\347\232\223\346\231\250/20260507-Vue\347\273\204\344\273\266.md" "b/\347\275\227\347\232\223\346\231\250/20260507-Vue\347\273\204\344\273\266.md"
new file mode 100644
index 0000000000000000000000000000000000000000..20bcf0c133cdd6a3aed6f7e4491f3053f94f2deb
--- /dev/null
+++ "b/\347\275\227\347\232\223\346\231\250/20260507-Vue\347\273\204\344\273\266.md"
@@ -0,0 +1,508 @@
+## 笔记
+
+### 组件基本定义与使用
+
+#### 全局注册组件
+在入口文件 main.js 中注册，所有页面和组件都能直接使用。
+- 注册方法：`app.component(组件名, 组件文件)`
+- 第一个参数：组件在模板中使用的标签名
+- 第二个参数：导入的组件对象
+- 注册后全局可直接使用，无需再次导入
+
+```javascript
+// main.js
+import { createApp } from 'vue'
+import App from './App.vue'
+// 导入组件
+import MyButton from './components/MyButton.vue'
+
+const app = createApp(App)
+// 全局注册组件
+app.component('MyButton', MyButton)
+app.mount('#app')
+```
+
+#### 局部注册组件
+推荐优先使用局部注册，减少不必要的全局挂载，优化性能。
+- Vue3 `<script setup>` 直接导入即可使用
+- 导入的变量名 = 模板标签名
+- 只在当前组件生效，不污染全局
+
+```vue
+<!-- 父组件 App.vue -->
+<template>
+  <div>
+    <h1>Vue3 组件示例</h1>
+    <!-- 使用子组件 -->
+    <MyCard />
+  </div>
+</template>
+
+<script setup>
+// 局部导入组件，无需注册可直接使用
+import MyCard from './components/MyCard.vue'
+</script>
+```
+
+### 组件通信
+#### 父子组件通信
+##### Props（父 → 子 传值）
+父组件通过属性传递数据，子组件通过 defineProps 接收数据，支持类型校验、默认值、必填校验。
+- 父组件：`<Child 属性名="值" :动态属性="变量" />`
+- 子组件：`defineProps({ 属性名: 校验规则 })`
+- 可配置：type 类型 / required 必填 / default 默认值
+
+**子组件 Child.vue**
+```vue
+<template>
+  <div class="child">
+    <p>接收的标题：{{ title }}</p>
+    <p>接收的数量：{{ count }}</p>
+  </div>
+</template>
+
+<script setup>
+// 定义 props 并校验
+const props = defineProps({
+  // 字符串类型，必填
+  title: {
+    type: String,
+    required: true
+  },
+  // 数字类型，带默认值
+  count: {
+    type: Number,
+    default: 0
+  }
+})
+</script>
+```
+
+**父组件使用**
+```vue
+<template>
+  <Child title="我是父组件传的值" :count="10" />
+</template>
+
+<script setup>
+import Child from './Child.vue'
+</script>
+```
+
+##### defineEmits（子 → 父 传值/触发事件）
+子组件通过自定义事件向父组件发送数据，父组件通过 v-on 监听事件。
+- 子组件：`defineEmits(['事件名'])` 声明 → `emit(事件名, 参数)` 触发
+- 父组件：`@事件名="处理方法"` 监听接收
+- 可传递多个参数，父组件按顺序接收
+
+**子组件Child.vue**
+```vue
+<template>
+  <button @click="sendMsg">向父组件传值</button>
+</template>
+
+<script setup>
+// 定义自定义事件
+const emit = defineEmits(['send-data'])
+
+const sendMsg = () => {
+  // 触发事件，传递参数
+  emit('send-data', '子组件的消息', 666)
+}
+</script>
+```
+
+**父组件监听**
+```vue
+<template>
+  <Child @send-data="handleReceive" />
+</template>
+
+<script setup>
+import Child from './Child.vue'
+
+// 接收子组件传递的数据
+const handleReceive = (msg, num) => {
+  console.log(msg, num)
+}
+</script>
+```
+
+#### 跨级传值（provide / inject）
+用于祖孙组件、多级组件间传值，无需逐层传递（跳过中间组件），父组件（或祖先组件）用 provide 提供数据，子组件（或后代组件）用 inject 接收数据，支持响应式传值。
+- provide：`provide('标识名', 数据/方法)`
+  - 参数1：自定义唯一名称
+  - 参数2：要传递的内容
+- inject：`inject('标识名', 默认值)`
+- 支持响应式数据，更新后所有后代同步更新
+
+**祖先组件（提供数据）**
+```vue
+<script setup>
+import { provide, ref } from 'vue'
+
+// 提供普通数据（非响应式）
+provide('theme', 'dark')
+
+// 提供响应式数据（推荐，数据变化时后代组件同步更新）
+const userInfo = ref({ name: '张三', age: 20 })
+provide('userInfo', userInfo)
+
+// 提供方法（后代组件可调用祖先组件方法）
+const updateUser = (newName) => {
+  userInfo.value.name = newName
+}
+provide('updateUser', updateUser)
+</script>
+```
+
+**后代组件（接收数据）**
+```vue
+<template>
+  <div>
+    <p>主题：{{ theme }}</p>
+    <p>用户名：{{ userInfo.name }}</p>
+    <button @click="updateUser('李四')">修改用户名</button>
+  </div>
+</template>
+
+<script setup>
+import { inject } from 'vue'
+
+// 接收数据，可设置默认值（当祖先组件未提供时使用）
+const theme = inject('theme', 'light')
+// 接收响应式数据
+const userInfo = inject('userInfo')
+// 接收祖先组件提供的方法
+const updateUser = inject('updateUser')
+</script>
+```
+
+### 组件核心能力（数据与生命周期）
+#### 组件响应式数据（组件内部状态管理）
+组件内部的响应式数据，用于维护组件自身的状态，仅在组件内部或通过通信传递给其他组件，常用 ref 和 reactive 定义。
+- ref：基本类型（数字/字符串/布尔）
+- reactive：对象/数组
+- 数据变化 → 视图自动更新
+
+```vue
+<template>
+  <div>
+    <p>组件内部状态：{{ count }}</p>
+    <button @click="count++">增加</button>
+    <p>组件内部对象：{{ info.name }}</p>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+
+// 基本类型响应式（组件内部状态）
+const count = ref(0)
+// 引用类型响应式（组件内部状态）
+const info = reactive({ name: '组件自身数据' })
+</script>
+```
+
+#### 组件生命周期
+组件从创建到销毁的整个过程，Vue3 组合式 API 中使用钩子函数监听，用于在组件不同阶段执行自定义逻辑，是组件的核心能力之一。
+- 直接导入使用，传入回调函数自动执行
+- 用于请求、操作DOM、清理定时器/监听
+
+常用钩子函数：
+- onMounted：组件挂载完成（DOM 渲染完毕，适合发起网络请求、操作 DOM）
+- onUpdated：组件更新完成（组件数据变化导致 DOM 重新渲染后执行）
+- onUnmounted：组件卸载（组件销毁时执行，适合清除定时器、事件监听、取消请求）
+
+```vue
+<script setup>
+import { onMounted, onUnmounted } from 'vue'
+
+// 组件挂载后执行（组件渲染完成）
+onMounted(() => {
+  console.log('组件挂载完成，可操作DOM或发起请求')
+  // 示例：发起接口请求
+  // axios.get('/api/list')
+})
+
+// 组件卸载时执行（组件销毁）
+onUnmounted(() => {
+  console.log('组件已卸载，清除资源')
+  // 示例：清除定时器
+  // clearInterval(timer)
+})
+</script>
+```
+
+### 模板引用（获取 DOM/子组件实例）
+通过 ref 获取组件内部的 DOM 元素或子组件实例，实现组件内部 DOM 操作或调用子组件方法。
+- 模板：`ref="变量名"`
+- 脚本：`const 变量名 = ref(null)`
+- 挂载后通过 `.value` 获取真实DOM / 子组件实例
+- 子组件必须用 `defineExpose` 暴露方法才能被调用
+
+```vue
+<template>
+  <!-- DOM 引用（组件内部 DOM） -->
+  <div ref="domRef">组件内部 DOM 元素</div>
+  <!-- 子组件引用 -->
+  <Child ref="childRef" />
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import Child from './Child.vue'
+
+// 定义 ref 变量，名称和模板中 ref 一致
+const domRef = ref(null)
+const childRef = ref(null)
+
+onMounted(() => {
+  // 操作组件内部 DOM
+  domRef.value.style.color = 'red'
+  // 调用子组件方法（子组件需用 defineExpose 暴露）
+  childRef.value.childMethod()
+})
+</script>
+```
+
+子组件暴露方法/属性（默认不暴露，需手动暴露）
+- 作用：让父组件能访问子组件的方法/属性
+- 语法：`defineExpose({ 方法名/属性名 })`
+
+```vue
+<script setup>
+// 子组件内部方法
+const childMethod = () => {
+  console.log('子组件方法被调用')
+}
+
+// 暴露方法/属性给父组件（仅暴露需要被父组件调用的内容）
+defineExpose({
+  childMethod
+})
+</script>
+```
+
+### 动态组件
+根据数据动态切换不同的组件，实现组件的灵活切换，适用于标签页、弹窗切换等场景。
+- 使用内置组件：`<component :is="组件变量" />`
+- `:is` 绑定要显示的组件
+- 切换时会销毁旧组件、创建新组件
+
+```vue
+<template>
+  <!-- 切换按钮 -->
+  <button @click="currentCom = 'Home'">首页</button>
+  <button @click="currentCom = 'User'">用户中心</button>
+  <!-- 动态渲染组件：:is 绑定组件名称 -->
+  <component :is="currentCom" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+// 导入需要切换的组件
+import Home from './Home.vue'
+import User from './User.vue'
+
+// 控制当前显示的组件
+const currentCom = ref('Home')
+</script>
+```
+
+### 组件缓存 keep-alive
+缓存不活动的组件实例，避免组件重复创建和销毁，提升页面性能，常与动态组件搭配使用。
+- 语法：`<keep-alive>` 包裹需要缓存的组件
+- 效果：切换后组件不销毁，保留状态
+- 适合：标签页、表单页、频繁切换的模块
+
+```vue
+<template>
+  <!-- keep-alive 包裹动态组件，实现组件缓存 -->
+  <keep-alive>
+    <component :is="currentCom" />
+  </keep-alive>
+</template>
+```
+
+## 作业
+```vue
+<script setup lang="ts">
+import { ref, Ref } from 'vue';
+
+let isLoggedIn: Ref<boolean> = ref(true)
+let score = ref(75)
+let isSubscribed: Ref<boolean> = ref(true)
+let level = "A"
+let isAdmin ="false"
+let hasPermission ="false"
+let isLoggedIn = false
+let username = "张三"
+let roleArr = ["admin", "editor"]
+let role = roleArr[1]
+</script>
+
+<template>
+  <p v-if="isLoggedIn">您已登录</p>
+  <p v-if="score >= 60">及格</p>
+  <p v-else>不及格</p>
+  <button v-show="!isSubscribed">订阅更新</button>
+  <div v-if="level === 'A'">优秀</div>
+  <div v-else-if="level === 'B'">良好</div>
+  <div v-else-if="level === 'C'">及格</div>
+  <div v-else>需努力</div>
+  <div v-if="isAdmin && hasPermission">管理面板</div>
+  <div id="app">
+    <div v-if="isLoggedIn">
+      <div class="user-info">
+        <p>当前用户：{{ username }}</p>
+        <p>角色：{{ role }}</p>
+      </div>
+
+      <div v-if="role === 'admin'" class="admin-panel">
+        <h3>管理员面板</h3>
+        <button>用户管理</button>
+        <button>系统设置</button>
+        <button>数据统计</button>
+      </div>
+
+      <div v-else-if="role === 'editor'" class="editor-panel">
+        <h3>编辑面板</h3>
+        <button>文章管理</button>
+        <button>草稿箱</button>
+      </div>
+
+      <div v-else class="user-panel">
+        <h3>用户面板</h3>
+        <p>欢迎阅读文章</p>
+      </div>
+
+    </div>
+    <div v-if="!isLoggedIn" class="login-prompt">
+      <p>请登录后查看更多内容</p>
+      <button>登录</button>
+    </div>
+  </div>
+</template>
+```
+
+```vue
+<script setup lang="ts">
+let fruits: string[] = ['苹果', '香蕉', '橙子']
+let cities = ['北京', '上海', '广州', '深圳']
+interface User {
+  name: string,
+  age: number,
+  major: string
+}
+let user: User = { name: '李四', age: 20, major: '计算机' }
+interface Student {
+  name: string
+  score: number
+}
+let students: Student[] = [
+  { name: "张三", score: 95 },
+  { name: "李四", score: 88 },
+  { name: "王五", score: 76 },
+  { name: "赵六", score: 92 },
+  { name: "钱七", score: 82 }
+]
+interface CategoryItem {
+  value01: number;
+  value02: number;
+  value03: number;
+}
+interface Category {
+  name: string;
+  items: CategoryItem;
+}
+let categories: Category[] = [
+  {
+    name: "分类一",
+    items: {
+      value01: 10,
+      value02: 20,
+      value03: 30
+    }
+  },
+  {
+    name: "分类二",
+    items: {
+      value01: 15,
+      value02: 25,
+      value03: 35
+    }
+  },
+  {
+    name: "分类三",
+    items: {
+      value01: 40,
+      value02: 50,
+      value03: 60
+    }
+  }
+];
+interface CartItem {
+  id: number,
+  name: string,
+  quantity: number,
+  price: number
+}
+let cartItems: CartItem[] = [
+  { id: 1, name: "苹果", quantity: 2, price: 8.5 },
+  { id: 2, name: "香蕉", quantity: 5, price: 3.2 },
+  { id: 3, name: "牛奶", quantity: 1, price: 45 },
+  { id: 4, name: "面包", quantity: 3, price: 12 },
+  { id: 5, name: "可乐", quantity: 4, price: 3.5 }
+];
+let totalPrice: number = 0
+cartItems.forEach((item) => {
+  totalPrice += item.quantity * item.price
+})
+</script>
+
+<template>
+  <ul>
+    <li v-for="item in fruits">{{ item }}</li>
+  </ul>
+  <div v-for="(city, index) in cities">
+    {{ index + 1 }}. {{ city }}
+  </div>
+  <div v-for="(value, key) in user">
+    {{ key }}: {{ value }}
+  </div>
+  <tr v-for="student in students">
+    <td>{{ student.name }}</td>
+    <td>{{ student.score }}</td>
+  </tr>
+  <div v-for="category in categories">
+    <h3>{{ category.name }}</h3>
+    <ul>
+      <li v-for="item in category.items">{{ item }}</li>
+    </ul>
+  </div>
+
+  <div class="cart">
+    <h2>购物车</h2>
+    <table>
+      <thead>
+        <tr>
+          <th>商品</th>
+          <th>单价</th>
+          <th>数量</th>
+          <th>小计</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="item in cartItems" :key="item.id">
+          <td>{{ item.name }}</td>
+          <td>¥{{ item.price }}</td>
+          <td>{{ item.quantity }}</td>
+          <td>¥{{ item.price * item.quantity }}</td>
+        </tr>
+      </tbody>
+    </table>
+    <div class="total">总计：¥{{ totalPrice }}</div>
+  </div>
+</template>
+```
\ No newline at end of file
diff --git "a/\347\275\227\347\232\223\346\231\250/20260508-Vue\346\217\222\346\247\275.md" "b/\347\275\227\347\232\223\346\231\250/20260508-Vue\346\217\222\346\247\275.md"
new file mode 100644
index 0000000000000000000000000000000000000000..817c4511d28e705d8e6ed7936d419cf67dfd7356
--- /dev/null
+++ "b/\347\275\227\347\232\223\346\231\250/20260508-Vue\346\217\222\346\247\275.md"
@@ -0,0 +1,247 @@
+## 笔记
+### 插槽 Slot
+组件的内容分发机制，允许父组件向子组件传递 HTML 结构，让组件更灵活、可复用。
+
+#### 默认插槽
+子组件只留一个通用内容占位位置，父组件写在子组件标签中间的内容，会自动填充进去。
+- 写法：子组件直接写 `<slot></slot>`
+- 规则：不用加任何属性，一个组件只能有一个默认插槽
+- 用法：父组件直接在子组件标签内部写内容即可
+
+子组件 MyBox.vue
+```vue
+<template>
+  <div class="box">
+    <!-- 插槽出口（默认插槽） -->
+    <slot></slot>
+  </div>
+</template>
+```
+
+父组件使用
+```vue
+<template>
+  <MyBox>
+    <!-- 插入自定义内容（填充默认插槽） -->
+    <p>父组件传递给子组件的内容</p>
+  </MyBox>
+</template>
+```
+
+#### 具名插槽（多个插槽区分使用）
+适合页面分多块区域布局，给每个插槽起名字，父组件可以把内容精准放到指定位置。
+- 子组件：`<slot name="插槽名"></slot>` 给插槽命名
+- 父组件：用 `<template #插槽名>` 包裹对应区域内容
+- 优势：可以同时定义多个互不干扰的插槽位置
+
+**子组件**
+```vue
+<template>
+  <div class="container">
+    <!-- 具名插槽：header -->
+    <slot name="header"></slot>
+    <!-- 具名插槽：main -->
+    <slot name="main"></slot>
+    <!-- 具名插槽：footer -->
+    <slot name="footer"></slot>
+  </div>
+</template>
+```
+
+**父组件使用**
+```vue
+<template>
+  <MyBox>
+    <template #header>
+      <h1>页面标题（填充header插槽）</h1>
+    </template>
+    <template #main>
+      <p>页面主体内容（填充main插槽）</p>
+    </template>
+    <template #footer>
+      <p>页面底部（填充footer插槽）</p>
+    </template>
+  </MyBox>
+</template>
+```
+
+#### 作用域插槽（子组件向插槽传数据）
+普通插槽只能父传结构，作用域插槽可以**子组件把自己的数据传给父组件使用**。
+- 子组件：在 slot 标签上自定义属性绑定数据
+- 父组件：在插槽模板中解构接收子组件传过来的字段
+- 可以和默认插槽、具名插槽组合使用
+
+##### 默认作用域插槽
+- 子组件在无名称的默认 slot 上绑定自定义数据
+- 父组件通过 `#default` 接收，直接解构取值渲染
+
+**子组件**
+```vue
+<template>
+  <div>
+    <!-- 向插槽传递数据：list 和 title -->
+    <slot :list="userList" title="用户列表"></slot>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+// 子组件内部数据，传递给插槽
+const userList = ref([{ id: 1, name: '小明' }, { id: 2, name: '小红' }])
+</script>
+```
+
+**父组件接收数据并渲染**
+
+```vue
+<template>
+  <MyBox>
+    <template #default="{ list, title }">
+      <h2>{{ title }}</h2>
+      <div v-for="item in list" :key="item.id">{{ item.name }}</div>
+    </template>
+  </MyBox>
+</template>
+```
+
+##### 具名作用域插槽
+- 给带 name 的具名插槽单独绑定专属数据
+- 每个命名插槽数据相互独立，互不影响
+- 父组件对应 `#插槽名` 解构接收当前插槽的数据
+
+**子组件**
+```vue
+<template>
+  <div class="card">
+    <!-- 具名插槽 header 传递数据 -->
+    <slot name="header" :title="cardTitle" :id="cardId"></slot>
+    
+    <!-- 具名插槽 content 传递数据 -->
+    <slot name="content" :list="contentList"></slot>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+// 子组件内部数据
+const cardTitle = ref('用户信息卡片')
+const cardId = ref(1001)
+const contentList = ref([
+  { name: '张三', age: 22 },
+  { name: '李四', age: 25 }
+])
+</script>
+```
+
+**父组件使用具名作用域插槽**
+```vue
+<template>
+  <MyCard>
+    <!-- 接收 header 插槽传递的数据 -->
+    <template #header="{ title, id }">
+      <h3>卡片ID：{{ id }} —— {{ title }}</h3>
+    </template>
+
+    <!-- 接收 content 插槽传递的数据 -->
+    <template #content="{ list }">
+      <div v-for="item in list" :key="item.name">
+        姓名：{{ item.name }}，年龄：{{ item.age }}
+      </div>
+    </template>
+  </MyCard>
+</template>
+
+<script setup>
+import MyCard from './MyCard.vue'
+</script>
+```
+
+## 作业
+```vue
+<script setup lang="ts">
+import { ref, type Ref } from 'vue';
+
+let url = "https://vuejs.org"
+let textClass = { highlight: true }
+let isReadonly: Ref<boolean> = ref(false)
+let isActive = ref(false)
+let hasError = ref(true)
+let fontColor = 'red'
+let fontSize = 24
+
+interface Article {
+    id: number,
+    isFeatured: boolean,
+    thumbnail: string,
+    title: string,
+    category: string,
+    author: string,
+    publishTime: Date
+}
+let article: Article = {
+    id: 0,
+    isFeatured: true,
+    thumbnail: 'https://lf-flow-web-cdn.doubao.com/obj/flow-doubao/doubao/web/doubao_avatar.png',
+    title: '我是标题',
+    category: '种类1',
+    author: '我是作者',
+    publishTime: new Date
+}
+
+function getTagColor(category: string) {
+    if (category === "种类1") {
+        return 'red'
+    } else {
+        return 'blue'
+    }
+}
+function formatDate(date: Date) {
+    return date
+}
+</script>
+
+<template>
+    <a v-bind:href="url">访问链接</a>
+    <p v-bind:class="textClass">这是一段文本</p>
+    <input type="text" v-bind:disabled="isReadonly" />
+    <div v-bind:class="{ active: isActive, 'text-danger': hasError }">动态Class</div>
+    <div v-bind:style="{ color: fontColor, fontSize: fontSize + 'px' }">样式文本</div>
+
+    <div class="news-card" :class="{ featured: article.isFeatured }">
+        <img :src="article.thumbnail" :alt="article.title" />
+        <div class="content">
+            <span class="tag" :style="{ backgroundColor: getTagColor(article.category) }">
+                {{ article.category }}
+            </span>
+            <h3 :class="{ 'highlight-title': article.isFeatured }">
+                {{ article.title }}
+            </h3>
+            <p class="meta">
+                <span>
+                    {{ article.author }}
+                </span>
+                <span>
+                    {{ formatDate(article.publishTime) }}
+                </span>
+            </p>
+            <a :href="'/article/' + article.id" class="read-more">阅读更多</a>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.highlight {
+    color: blue;
+    font-weight: bold;
+}
+
+.active {
+    background-color: red;
+}
+
+.text-danger {
+    background-color: yellow;
+}
+</style>
+```
diff --git "a/\347\275\227\347\232\223\346\231\250/20260511-\345\237\272\344\272\216Vue3\347\232\204TypeScript.md" "b/\347\275\227\347\232\223\346\231\250/20260511-\345\237\272\344\272\216Vue3\347\232\204TypeScript.md"
new file mode 100644
index 0000000000000000000000000000000000000000..20811b342e3620dcd149bbc6d6d7e5528840b527
--- /dev/null
+++ "b/\347\275\227\347\232\223\346\231\250/20260511-\345\237\272\344\272\216Vue3\347\232\204TypeScript.md"
@@ -0,0 +1,1067 @@
+# 第一部分：开发环境与基础结构
+
+## 基础配置
+
+### 创建 Vue3 + TS 项目
+
+```bash
+# 推荐：Vite（当前Vue3主流方案）
+npm create vite@latest my-vue-ts -- --template vue-ts
+
+# 安装依赖
+npm install
+
+# 启动项目
+npm run dev
+```
+
+### Vue3 + TS 基础组件结构
+
+- `lang="ts"` 开启 TypeScript
+- `<script setup>` 是 Vue3 组合式 API 主流写法
+- 顶层变量自动暴露给模板
+- 不需要 `return`
+
+```vue
+<script setup lang="ts">
+const count = 10
+
+const handleClick = (): void => {
+  console.log('点击事件')
+}
+</script>
+
+<template>
+  <div>{{ count }}</div>
+  <button @click="handleClick">
+    点击
+  </button>
+</template>
+```
+
+# 第二部分：TS 基础类型
+
+## string
+
+```ts
+const title: string = 'Vue3 + TS'
+
+const msg: string = `Hello Vue3`
+```
+
+适配场景：
+
+- Props 文本
+- 标题
+- 提示信息
+- 用户名
+
+## number
+
+```ts
+const age: number = 18
+
+const price: number = 99.9
+```
+
+适配场景：
+
+- ID
+- 数量
+- 金额
+- 分页
+
+## boolean
+
+```ts
+const isShow: boolean = true
+
+const loading: boolean = false
+```
+
+适配场景：
+
+- loading
+- 开关
+- 显示隐藏
+- 权限控制
+
+## null 与 undefined
+
+```ts
+const avatar: string | null = null
+
+const desc: string | undefined = undefined
+```
+
+Vue3 高频：
+
+```ts
+const user = ref<User | null>(null)
+```
+
+因为：
+
+- 接口数据未返回前为空
+- DOM 未挂载前为空
+
+## void
+
+函数无返回值时使用。
+
+```ts
+const handleClick = (): void => {
+  console.log('点击')
+}
+```
+
+## 数组类型
+
+### 基础写法
+
+```ts
+const list: string[] = ['Vue', 'React']
+```
+
+推荐写法：
+
+```ts
+类型[]
+```
+
+这是 Vue3 中最常用写法。
+
+### 泛型数组写法
+
+```ts
+const list: Array<string> = ['Vue', 'React']
+```
+
+等价于：
+
+```ts
+string[]
+```
+
+### 对象数组
+
+```ts
+interface User {
+  id: number
+  name: string
+}
+
+const userList: User[] = [
+  {
+    id: 1,
+    name: '张三'
+  },
+  {
+    id: 2,
+    name: '李四'
+  }
+]
+```
+
+适配场景：
+
+```vue
+<li v-for="item in userList" :key="item.id">
+  {{ item.name }}
+</li>
+```
+
+------
+
+------
+
+# 第三部分：函数与对象类型
+
+## 函数
+
+Vue3 中函数极其高频：
+
+- 点击事件
+- 接口请求
+- 工具函数
+- emit
+- computed
+- hooks
+
+必须重点掌握。
+
+### 基础函数
+
+#### 无参数无返回值
+
+```ts
+const closeDialog = (): void => {
+  console.log('关闭弹窗')
+}
+```
+
+#### 有参数无返回值
+
+```ts
+const deleteUser = (id: number): void => {
+  console.log(id)
+}
+```
+
+#### 有参数有返回值
+
+```ts
+const add = (a: number, b: number): number => {
+  return a + b
+}
+```
+
+#### 可选参数
+
+```ts
+const getName = (
+  name: string,
+  age?: number
+): string => {
+  if (age) {
+    return `${name}-${age}`
+  }
+
+  return name
+}
+```
+
+规则：
+
+- 可选参数必须放最后
+
+错误：
+
+```ts
+(name?: string, age: number)
+```
+
+## interface
+
+Vue3 中：
+
+- Props
+- API 数据
+- 表单
+- 用户信息
+- 商品数据
+
+大量使用 interface。
+
+### 基础对象类型
+
+```ts
+interface User {
+  id: number
+  name: string
+  age?: number
+}
+```
+
+说明：
+
+- `?` 表示可选属性
+
+### 使用 interface
+
+```ts
+const user: User = {
+  id: 1,
+  name: '张三'
+}
+```
+
+错误：
+
+```ts
+const user: User = {
+  name: '张三'
+}
+```
+
+因为缺少：
+
+```ts
+id
+```
+
+### interface 继承
+
+```ts
+interface User {
+  name: string
+}
+
+interface Admin extends User {
+  role: string
+}
+```
+
+适配场景：
+
+- 用户体系
+- 接口扩展
+- 组件数据复用
+
+## type
+
+### 基础对象
+
+```ts
+type Product = {
+  id: number
+  title: string
+}
+```
+
+### 联合类型
+
+```ts
+type Status = 'success' | 'error' | 'loading'
+```
+
+### 函数类型
+
+```ts
+type Fn = (name: string) => void
+```
+
+## interface 和 type 区别
+
+| 场景     | 推荐      |
+| -------- | --------- |
+| Props    | interface |
+| API数据  | interface |
+| 联合类型 | type      |
+| 函数类型 | type      |
+| 工具类型 | type      |
+| 类型计算 | type      |
+
+经验：
+
+- 对象结构优先 interface
+- 联合/函数优先 type
+
+## 联合类型
+
+### 基础联合类型
+
+```ts
+const id: string | number = 1001
+```
+
+说明：
+
+只能是：
+
+- string
+- number
+
+### 字面量联合
+
+```ts
+type ButtonType =
+  | 'primary'
+  | 'success'
+  | 'danger'
+const type: ButtonType = 'primary'
+```
+
+错误：
+
+```ts
+const type: ButtonType = 'warning'
+```
+
+### Vue3 高频场景
+
+```ts
+interface Props {
+  status:
+    | 'loading'
+    | 'success'
+    | 'error'
+}
+```
+
+适配：
+
+- 状态管理
+- 按钮类型
+- 请求状态
+- 标签类型
+
+# 第四部分：泛型与类型系统进阶
+
+## 泛型（Vue3 + TS 核心）
+
+Vue3 大量 API 本质都是泛型。
+
+例如：
+
+```ts
+ref<User>()
+computed<string>()
+Promise<User>
+```
+
+## 基础泛型
+
+```ts
+function getData<T>(data: T): T {
+  return data
+}
+```
+
+使用：
+
+```ts
+getData<string>('hello')
+
+getData<number>(100)
+```
+
+## Promise 泛型
+
+```ts
+interface User {
+  name: string
+}
+
+const getUser = async (): Promise<User> => {
+  return {
+    name: '张三'
+  }
+}
+```
+
+## 泛型约束
+
+```ts
+interface LengthType {
+  length: number
+}
+
+function getLength<T extends LengthType>(
+  data: T
+): number {
+  return data.length
+}
+```
+
+# 第五部分：Vue3 响应式 API + TS
+
+## Vue3 响应式 + TS
+
+### ref
+
+#### 基本类型
+
+```ts
+import { ref } from 'vue'
+
+const count = ref(0)
+
+count.value = 10
+```
+
+特点：
+
+- 自动推导类型
+- 必须 `.value`
+
+#### 字符串
+
+```ts
+const title = ref('Vue3')
+```
+
+#### 布尔值
+
+```ts
+const loading = ref(false)
+```
+
+#### 对象类型
+
+```ts
+interface User {
+  name: string
+  age: number
+}
+
+const user = ref<User | null>(null)
+```
+
+核心：
+
+```ts
+User | null
+```
+
+因为：
+
+初始化为空。
+
+#### 数组类型
+
+```ts
+interface User {
+  name: string
+}
+
+const userList = ref<User[]>([])
+```
+
+#### never[] 易错点
+
+错误：
+
+```ts
+const list = ref([])
+```
+
+会推导为：
+
+```ts
+Ref<never[]>
+```
+
+正确：
+
+```ts
+const list = ref<string[]>([])
+```
+
+### reactive
+
+reactive：
+
+- 专门用于对象
+- 不需要 `.value`
+
+#### 基础对象
+
+```ts
+import { reactive } from 'vue'
+
+interface User {
+  name: string
+  age: number
+}
+
+const user = reactive<User>({
+  name: '张三',
+  age: 18
+})
+```
+
+修改：
+
+```ts
+user.age = 20
+```
+
+#### reactive 数组
+
+```ts
+const list = reactive<string[]>([])
+```
+
+### ref 和 reactive 区别
+
+| 对比           | ref      | reactive |
+| -------------- | -------- | -------- |
+| 基本类型       | ✅        | ❌        |
+| 对象           | ✅        | ✅        |
+| 数组           | ✅        | ✅        |
+| 是否需要.value | ✅        | ❌        |
+| 推荐场景       | 基本类型 | 对象结构 |
+
+经验：
+
+- 基本类型 → ref
+- 对象 → reactive
+
+### computed（Vue3 高频）
+
+#### 自动推导
+
+```ts
+const count = ref(10)
+
+const doubleCount = computed(() => {
+  return count.value * 2
+})
+```
+
+自动推导：
+
+```ts
+ComputedRef<number>
+```
+
+#### 手动指定类型
+
+```ts
+const title = computed<string>(() => {
+  return 'Vue3 + TS'
+})
+```
+
+# 第六部分：Vue3 组件通信 + TS
+
+## Props + TS（核心）
+
+Vue3 + TS 最大核心之一。
+
+### defineProps 基础写法
+
+```ts
+const props = defineProps({
+  title: String,
+
+  count: {
+    type: Number,
+    required: true
+  }
+})
+```
+
+### defineProps 泛型写法（推荐）
+
+#### interface 定义 Props
+
+```ts
+interface Props {
+  id: number
+  title: string
+  status?: 'success' | 'error'
+}
+```
+
+#### defineProps 泛型
+
+```ts
+const props = defineProps<Props>()
+```
+
+这是 Vue3 + TS 主流写法。
+
+#### Props 默认值
+
+##### withDefaults
+
+```ts
+interface Props {
+  msg?: string
+  list?: string[]
+}
+
+const props = withDefaults(
+  defineProps<Props>(),
+  {
+    msg: '默认消息',
+
+    list: () => []
+  }
+)
+```
+
+重点：
+
+数组默认值必须：
+
+```ts
+() => []
+```
+
+不能直接：
+
+```ts
+[]
+```
+
+## Emit + TS（组件通信核心）
+
+### defineEmits 基础写法
+
+```ts
+const emit = defineEmits([
+  'change',
+  'update'
+])
+```
+
+缺点：
+
+- 不校验参数类型
+
+### defineEmits 泛型写法（推荐）
+
+```ts
+const emit = defineEmits<{
+  change: [id: number]
+
+  update: [
+    title: string,
+    loading: boolean
+  ]
+
+  confirm: []
+}>()
+```
+
+### 触发事件
+
+```ts
+emit('change', 1)
+
+emit('update', 'Vue3', true)
+
+emit('confirm')
+```
+
+错误：
+
+```ts
+emit('change', '1')
+```
+
+因为：
+
+```ts
+id: number
+```
+
+### defineExpose + TS
+
+Vue3 中：
+
+`<script setup>` 默认封闭。
+
+
+需要主动暴露。
+
+## 子组件
+
+```ts
+const count = ref(0)
+
+const increment = (): void => {
+  count.value++
+}
+
+defineExpose({
+  count,
+  increment
+})
+```
+
+## 父组件
+
+```ts
+const childRef = ref<
+  InstanceType<typeof Child> | null
+>(null)
+```
+
+调用：
+
+```ts
+childRef.value?.increment()
+```
+
+# 第七部分：类型断言与 DOM 类型处理
+
+## 类型断言（Vue3 高频）
+
+语法：
+
+```ts
+值 as 类型
+```
+
+### unknown 类型断言
+
+```ts
+const val: unknown = 'hello'
+
+const str = val as string
+```
+
+### DOM 类型断言（超高频）
+
+```vue
+<template>
+  <input ref="inputRef" />
+</template>
+const inputRef = ref<
+  HTMLInputElement | null
+>(null)
+
+onMounted(() => {
+  inputRef.value?.focus()
+})
+```
+
+### 事件对象类型断言
+
+```ts
+const handleInput = (
+  e: Event
+): void => {
+  const target =
+    e.target as HTMLInputElement
+
+  console.log(target.value)
+}
+```
+
+### 非空断言 !
+
+```ts
+console.log(user.value!.name)
+```
+
+含义：
+
+告诉 TS：
+
+```txt
+这里一定不是 null
+```
+
+但：
+
+不安全。
+
+更推荐：
+
+```ts
+user.value?.name
+```
+
+# 第八部分：TS 高级类型工具（Vue3 高频）
+
+## keyof（Vue3 高频）
+
+### 获取对象 key
+
+```ts
+interface User {
+  name: string
+  age: number
+}
+
+// 'name' | 'age'
+type UserKey = keyof User
+```
+
+### Vue3 高频场景
+
+```ts
+const getValue = (
+  key: keyof User
+) => {
+  return user[key]
+}
+```
+
+## typeof（Vue3 高频）
+
+### 获取变量类型
+
+```ts
+const user = {
+  name: '张三',
+  age: 18
+}
+
+type UserType = typeof user
+```
+
+### reactive 高频场景
+
+```ts
+const state = reactive({
+  count: 0,
+  title: 'Vue3'
+})
+
+type StateType = typeof state
+```
+
+## 工具类型（Vue3 超高频）
+
+### Partial
+
+全部属性变可选。
+
+```ts
+interface User {
+  name: string
+  age: number
+}
+
+type PartialUser = Partial<User>
+```
+
+适配：
+
+- 编辑接口
+- 表单更新
+
+### Pick
+
+选择部分属性。
+
+```ts
+type UserInfo = Pick<
+  User,
+  'name' | 'age'
+>
+```
+
+### Omit
+
+删除指定属性。
+
+```ts
+interface User {
+  id: number
+  name: string
+  password: string
+}
+
+type UserInfo = Omit<
+  User,
+  'password'
+>
+```
+
+## 类型守卫（Vue3 高频）
+
+当一个值可能是多个类型时。
+
+必须先判断。
+
+## typeof 守卫
+
+```ts
+const val: string | number = 'hello'
+
+if (typeof val === 'string') {
+  console.log(val.length)
+}
+```
+
+## in 守卫
+
+```ts
+interface User {
+  name: string
+}
+
+interface Admin {
+  role: string
+}
+
+const person: User | Admin = {
+  name: '张三'
+}
+
+if ('name' in person) {
+  console.log(person.name)
+}
+```
+
+## instanceof 守卫
+
+```ts
+const time = new Date()
+
+if (time instanceof Date) {
+  console.log(time.getFullYear())
+}
+```
+
+## any 和 unknown（Vue3 避坑重点）
+
+### any
+
+```ts
+let val: any = 123
+
+val = 'hello'
+val = true
+val.xxx.yyy
+```
+
+问题：
+
+TS 完全失效。
+
+### unknown（推荐）
+
+```ts
+let val: unknown = 'hello'
+```
+
+必须先判断：
+
+```ts
+if (typeof val === 'string') {
+  console.log(val.length)
+}
+```
+
+# 第九部分：Vue3 高频事件类型
+
+## Vue3 高频事件类型
+
+### MouseEvent
+
+```ts
+const handleClick = (
+  e: MouseEvent
+): void => {
+  console.log(e.clientX)
+}
+```
+
+### KeyboardEvent
+
+```ts
+const handleKeydown = (
+  e: KeyboardEvent
+): void => {
+  console.log(e.key)
+}
+```
+
+### InputEvent
+
+```ts
+const handleInput = (
+  e: InputEvent
+): void => {
+  console.log(e.data)
+}
+```
+
+### SubmitEvent
+
+```ts
+const handleSubmit = (
+  e: SubmitEvent
+): void => {
+  e.preventDefault()
+}
+```
+
diff --git "a/\347\275\227\347\232\223\346\231\250/20260513-Vue\350\267\257\347\224\261\345\237\272\347\241\200.md" "b/\347\275\227\347\232\223\346\231\250/20260513-Vue\350\267\257\347\224\261\345\237\272\347\241\200.md"
new file mode 100644
index 0000000000000000000000000000000000000000..b4ae0aee12e87ed4f7c066008b55a84df5ca918c
--- /dev/null
+++ "b/\347\275\227\347\232\223\346\231\250/20260513-Vue\350\267\257\347\224\261\345\237\272\347\241\200.md"
@@ -0,0 +1,55 @@
+## 笔记
+### Vue3 路由基础与使用
+
+#### 路由安装
+- 项目单独安装 vue-router 依赖，Vue3 项目搭配 vue-router@4 版本使用
+- 安装完成后才可在项目中配置路由规则、实现页面跳转
+
+#### 路由创建与挂载
+- 单独新建路由配置文件，导入 `createRouter`、`createWebHistory` 核心方法
+- `createRouter` 用于创建路由实例，接收路由配置对象
+- `createWebHistory` 开启 history 路由模式，地址栏不带 # 号
+- 通过 routes 数组配置路由规则，最后在入口文件把路由实例挂载到 Vue 实例
+
+```javascript
+// router/index.js
+import { createRouter, createWebHistory } from 'vue-router'
+import Home from '../views/Home.vue'
+import About from '../views/About.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home
+  },
+  {
+    path: '/about',
+    name: 'About',
+    component: About
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+export default router
+```
+
+#### 入口文件挂载路由
+- 导入写好的路由文件
+- 通过 `app.use(router)` 全局安装路由，整个项目即可使用路由功能
+
+```javascript
+// main.js
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+app.use(router)
+app.mount('#app')
+```
+
diff --git "a/\347\275\227\347\232\223\346\231\250/20260514-Vue\350\267\257\347\224\261\345\257\274\350\210\252.md" "b/\347\275\227\347\232\223\346\231\250/20260514-Vue\350\267\257\347\224\261\345\257\274\350\210\252.md"
new file mode 100644
index 0000000000000000000000000000000000000000..16ca9dc425323cc801164877aa311d35866050bf
--- /dev/null
+++ "b/\347\275\227\347\232\223\346\231\250/20260514-Vue\350\267\257\347\224\261\345\257\274\350\210\252.md"
@@ -0,0 +1,204 @@
+## 笔记
+
+### 路由导航 router\-link
+
+- 核心作用：替代 a 标签实现页面跳转
+
+- 跳转特点：不会刷新整个页面，属于单页应用局部跳转
+
+- 核心属性：to —— 配置目标路由地址
+
+- to 属性要求：必须和路由规则里的 path 完全保持一致
+
+- 自带特性：路由激活样式，选中的路由会自动添加默认 class
+
+```vue
+<!-- router-link 基础使用示例 -->
+<template>
+  <!-- 跳转到首页，路径与路由规则path一致 -->
+  <router-link to="/">首页</router-link>
+  <!-- 跳转到关于页 -->
+  <router-link to="/about">关于页</router-link>
+  <!-- 跳转到用户页（后续结合路径参数使用） -->
+  <router-link to="/user/1001">用户1001</router-link>
+</template>
+
+```
+
+### 编程式导航
+
+- 核心特点：不用写标签，通过代码逻辑实现路由跳转
+
+- 获取路由实例：使用 useRouter 函数
+
+- 核心跳转方法1：push —— 新增历史记录，可通过返回键回到上一页
+
+- push 传参方式1：直接传字符串路径（简洁直观）
+
+- push 传参方式2：传对象，配置 path 字段指定路径
+
+- 核心跳转方法2：replace —— 替换当前历史记录，无法通过返回键回到上一页
+
+- replace 用法：与push完全一致，仅方法名不同
+
+```vue
+<template>
+  <button @click="goHome">回到首页</button>
+  <button @click="goAbout">前往关于页</button>
+  <button @click="goUser">前往用户页</button>
+  <button @click="replaceAbout">replace前往关于页</button>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router'
+// 获取路由实例
+const router = useRouter()
+
+// 跳转首页（字符串路径）- push方法
+const goHome = () => {
+  router.push('/')
+}
+
+// 跳转关于页（对象配置路径）- push方法
+const goAbout = () => {
+  router.push({ path: '/about' })
+}
+
+// 跳转用户页（带路径参数）- push方法
+const goUser = () => {
+  router.push('/user/1002')
+}
+
+// 跳转关于页 - replace方法（替换历史记录）
+const replaceAbout = () => {
+  // 用法和push完全一致，仅方法名不同
+  router.replace('/about')
+  // 也可传对象配置
+  // router.replace({ path: '/about' })
+}
+</script>
+
+```
+
+### 路由传参
+
+#### 路径参数
+
+- 声明方式：路由规则中通过 \`:参数名\` 声明动态参数
+
+- 跳转方式：跳转时在路径后直接拼接实际参数值
+
+- 接收方式：页面内用 useRoute 获取路由实例
+
+- 取值位置：从 route\.params 中获取对应参数
+
+- 适用场景：参数是页面必需的（如用户ID、商品ID）
+
+```javascript
+// 路由配置（声明路径参数）
+{
+  path: '/user/:id', // :id 是动态参数，可自定义参数名
+  name: 'User',
+  component: () => import('../views/User.vue')
+}
+
+```
+
+```vue
+<!-- 跳转方式1：router-link 跳转（带路径参数） -->
+<template>
+  <router-link to="/user/1001">用户1001</router-link>
+  <router-link to="/user/1002">用户1002</router-link>
+</template>
+
+```
+
+```vue
+<!-- 跳转方式2：编程式导航跳转（带路径参数）- 含push和replace两种方法 -->
+<script setup>
+import { useRouter } from 'vue-router'
+const router = useRouter()
+
+const goUser = () => {
+  // 方式1：push方法（新增历史记录）
+  router.push('/user/1003')
+  // 方式2：replace方法（替换历史记录）
+  // router.replace('/user/1003')
+  // 两种方法均可传对象配置
+  // router.push({ path: '/user/1003' })
+  // router.replace({ path: '/user/1003' })
+}
+</script>
+
+```
+
+```vue
+<!-- 接收参数页面（User.vue） -->
+<script setup>
+import { useRoute } from 'vue-router'
+// 获取路由实例（用于接收参数）
+const route = useRoute()
+// 获取路径参数id，控制台打印验证
+console.log('路径参数id：', route.params.id)
+</script>
+
+```
+
+#### 查询参数
+
+- 声明特点：不用提前在路由规则中声明参数
+
+- 传递方式：跳转时通过 query 字段传递键值对参数
+
+- 接收方式：页面内用 useRoute 获取路由实例
+
+- 取值位置：从 route\.query 中直接获取对应键的值
+
+- 适用场景：参数是非必需的（如筛选条件、分页参数）
+
+```vue
+<!-- 跳转方式1：router-link 跳转（带查询参数） -->
+<template>
+  <router-link 
+    :to="{ 
+      path: '/about', 
+      query: { name: '张三', age: 20 } 
+    }"
+  >
+    前往关于页（带查询参数）
+  </router-link>
+</template>
+
+```
+
+```vue
+<!-- 跳转方式2：编程式导航跳转（带查询参数）- 含push和replace两种方法 -->
+<script setup>
+import { useRouter, useRoute } from 'vue-router'
+const router = useRouter()
+const route = useRoute()
+
+// 跳转并传递查询参数 - push方法
+const goPage = () => {
+  router.push({
+    path: '/about',
+    query: { name: '张三', age: 20, gender: '男' }
+  })
+}
+
+// 跳转并传递查询参数 - replace方法
+const replacePage = () => {
+  router.replace({
+    path: '/about',
+    query: { name: '李四', age: 22, gender: '女' }
+  })
+}
+
+// 接收查询参数，控制台打印验证
+const getQueryParams = () => {
+  console.log('查询参数name：', route.query.name)
+  console.log('查询参数age：', route.query.age)
+}
+</script>
+
+```
diff --git "a/\347\275\227\347\232\223\346\231\250/20260515-Vue\350\267\257\347\224\261\345\265\214\345\245\227.md" "b/\347\275\227\347\232\223\346\231\250/20260515-Vue\350\267\257\347\224\261\345\265\214\345\245\227.md"
new file mode 100644
index 0000000000000000000000000000000000000000..9687617ec050b850d9bb62848bb2c2a271646fc1
--- /dev/null
+++ "b/\347\275\227\347\232\223\346\231\250/20260515-Vue\350\267\257\347\224\261\345\265\214\345\245\227.md"
@@ -0,0 +1,496 @@
+## 笔记
+
+### 嵌套路由
+
+- 适用场景：页面内包含子页面的布局（如后台管理、主体布局\+子页面切换）
+- 核心配置：用children数组配置子路由，父组件需预留\&lt;router\-view\&gt;出口
+- 路径规则：子路由path不加/拼接父路由，加/为绝对路径（不拼接）
+- 支持多层嵌套、默认子路由，子路由传参与父路由一致（params/query）
+
+```javascript
+// 父路由path：/layout，父组件Layout.vue需包含<router-view>（子组件渲染出口）
+// 子路由path不加/，自动拼接父路由path → /layout/news、/layout/msg
+// path: '' 为默认子路由，访问/layout时自动渲染Index.vue
+const routes = [
+  {
+    path: '/layout', 
+    component: () => import('../views/Layout.vue'), // 父组件必须含<router-view>
+    children: [
+      { path: 'news', component: () => import('../views/News.vue') }, // 子路由1：/layout/news
+      { path: 'msg', component: () => import('../views/Msg.vue') }, // 子路由2：/layout/msg
+      { path: '', component: () => import('../views/Index.vue') }, // 默认子路由
+      // 多层嵌套示例：子路由嵌套孙路由，访问路径 /layout/user/detail
+      {
+        path: 'user',
+        component: () => import('../views/User.vue'),
+        children: [
+          { path: 'detail', component: () => import('../views/UserDetail.vue') }
+        ]
+      },
+      // params传参（动态路由）：访问路径 /layout/news/123，id为动态参数
+      { path: 'news/:id', component: () => import('../views/NewsDetail.vue') }
+    ]
+  }
+]
+```
+
+#### 子路由传参补充
+
+- 传参方式：支持params（动态路由）、query（地址栏拼接）两种
+
+- params传参：路由path需加:参数名，跳转时拼接路径传递参数
+
+- query传参：无需修改路由path，通过路由对象的query属性传递
+
+- 组件中获取参数：params用this\.$route\.params，query用this\.$route\.query
+
+```javascript
+// 路由配置（配合传参，注释说明传参规则）
+const routes = [
+  {
+    path: '/layout',
+    component: () => import('../views/Layout.vue'),
+    children: [
+      { path: 'news/:id', component: () => import('../views/NewsDetail.vue') }, // params传参（:id为动态参数）
+      { path: 'msg', component: () => import('../views/Msg.vue') } // query传参（无需修改path）
+    ]
+  }
+]
+
+// 页面跳转传参示例（注释说明每种传参的用法和访问路径）
+// 1. params传参：跳转路径 /layout/news/123，参数id=123（组件中this.$route.params.id获取）
+this.$router.push('/layout/news/123')
+// 2. query传参：跳转路径 /layout/msg?id=456，参数id=456（组件中this.$route.query.id获取）
+this.$router.push({ path: '/layout/msg', query: { id: 456 } })
+```
+
+### 路由重定向
+
+- 作用：访问指定路径时自动跳转目标路由，简化访问流程、避免页面空白
+- 核心配置：通过redirect属性指定跳转目标（path、回调函数、路由对象三种写法）
+- 常见场景：根路径重定向、旧路径跳转新路径、未登录权限跳转
+- 与别名区别：重定向改变地址栏路径，别名（alias）不改变
+
+```javascript
+// 基础示例：根路径/重定向到/home（最常用写法，注释说明场景）
+// 场景：访问网站根目录时，自动跳转到首页，避免页面空白
+{
+  path: '/',
+  redirect: '/home' // redirect直接写目标path（写法1）
+}
+```
+
+```javascript
+{
+  path: '/',
+  redirect: '/home'
+}
+```
+
+#### 路由重定向三种写法示例
+
+- 写法1：直接写目标path（最简洁，适合固定跳转）
+
+- 写法2：回调函数（可根据当前路由参数动态跳转）
+
+- 写法3：路由对象（配合name属性，跳转更灵活）
+
+```javascript
+const routes = [
+  // 写法1：直接写目标path（注释：固定跳转，访问/ → /home）
+  { path: '/', redirect: '/home' },
+  // 写法2：回调函数写法（注释：to为当前路由对象，可获取query/params参数动态跳转）
+  { 
+    path: '/oldPath', 
+    redirect: (to) => {
+      // 示例：根据query参数type，动态跳转到page1或page2
+      if (to.query.type === '1') {
+        return '/page1'
+      } else {
+        return '/page2'
+      }
+    }
+  },
+  // 写法3：路由对象写法（注释：配合name属性，跳转name为Home的路由）
+  { 
+    path: '/test', 
+    redirect: { name: 'Home' } 
+  },
+  // 配合写法3：给路由配置name属性（name唯一，用于路由对象跳转）
+  { path: '/home', name: 'Home', component: () => import('../views/Home.vue') }
+]
+```
+
+```javascript
+const routes = [
+  // 写法1：直接写目标path（最常用）
+  { path: '/', redirect: '/home' },
+  // 写法2：回调函数写法（动态重定向）
+  { 
+    path: '/oldPath', 
+    // to为当前访问的路由对象，可获取params、query等参数
+    redirect: (to) => {
+      // 示例：根据参数动态跳转
+      if (to.query.type === '1') {
+        return '/page1'
+      } else {
+        return '/page2'
+      }
+    }
+  },
+  // 写法3：路由对象写法（配合name属性）
+  { 
+    path: '/test', 
+    redirect: { name: 'Home' } // 跳转至name为Home的路由
+  },
+  // 配置name属性的路由（配合上面写法3）
+  { path: '/home', name: 'Home', component: () => import('../views/Home.vue') }
+]
+```
+
+#### 重定向与别名（alias）区别示例
+
+- 重定向（redirect）：改变地址栏路径，本质是跳转
+
+- 别名（alias）：不改变地址栏路径，仅路径映射（相当于别名）
+
+```javascript
+const routes = [
+  // 重定向示例：访问/about → 地址栏变成/home，页面渲染Home组件
+  { path: '/about', redirect: '/home' },
+  // 别名示例：访问/aliasHome → 地址栏还是/aliasHome，页面渲染Home组件
+  { path: '/home', name: 'Home', component: Home, alias: '/aliasHome' }
+]
+
+// 区别说明（注释）：
+// 1. 访问/about → 地址栏→/home，页面→Home（重定向：跳转+路径变更）
+// 2. 访问/aliasHome → 地址栏→/aliasHome，页面→Home（别名：无跳转+路径不变）
+```
+
+## 作业
+
+### router/index.ts
+
+```ts
+import { createRouter, createWebHistory } from 'vue-router'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [{
+    path: "/",
+    name: "home",
+    component: () => import("@/components/Home.vue"),
+    children: [
+      {
+        path: "",
+        redirect: "/ParentA/A01"
+      },
+      {
+        path: "ParentA",
+        name: "PA",
+        component: () => import("@/components/ParentA.vue"),
+        children: [
+          {
+            path: "A01",
+            name: "A01",
+            component: () => import("@/components/A01.vue")
+          },
+          {
+            path: "A02",
+            name: "A02",
+            component: () => import("@/components/A02.vue")
+          },
+          {
+            path: "A03",
+            name: "A03",
+            component: () => import("@/components/A03.vue")
+          }
+        ]
+      },
+      {
+        path: "ParentB",
+        name: "PB",
+        component: () => import("@/components/ParentB.vue"),
+        children: [
+
+          {
+            path: "B01",
+            name: "B01",
+            component: () => import("@/components/B01.vue")
+          },
+          {
+            path: "B02",
+            name: "B02",
+            component: () => import("@/components/B02.vue")
+          },
+          {
+            path: "B03",
+            name: "B03",
+            component: () => import("@/components/B03.vue")
+          },
+        ]
+      },
+      {
+        path: "ParentC",
+        name: "PC",
+        component: () => import("@/components/ParentC.vue"),
+        children: [
+
+          {
+            path: "C01",
+            name: "C01",
+            component: () => import("@/components/C01.vue")
+          },
+          {
+            path: "C02",
+            name: "C02",
+            component: () => import("@/components/C02.vue")
+          },
+          {
+            path: "C03",
+            name: "C03",
+            component: () => import("@/components/B03.vue")
+          },
+        ]
+      },
+    ]
+  }
+  ]
+})
+
+export default router
+```
+
+### App.vue
+
+```vue
+<script setup lang="ts">
+
+</script>
+
+<template>
+    <RouterView></RouterView>
+</template>
+
+<style scoped>
+* {
+    margin: 0;
+    padding: 0;
+}
+</style>
+```
+
+### src/components/Home.vue（一级路由）
+
+```vue
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+
+let router = useRouter()
+function changeContentA() {
+    router.push({ name: "PA" })
+}
+function changeContentB() {
+    router.push({ name: "PB" })
+}
+function changeContentC() {
+    router.push({ name: "PC" })
+}
+</script>
+
+<template>
+    <div class="box">
+        <div class="box-top">
+            <div class="nav-list">
+                <button class="nav-itme" @click="changeContentA">A</button>
+                <button class="nav-itme" @click="changeContentB">B</button>
+                <button class="nav-itme" @click="changeContentC">C</button>
+            </div>
+        </div>
+        <div class="box-bottom">
+           <RouterView></RouterView>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+* {
+    margin: 0;
+    padding: 0;
+}
+
+.box {
+    width: 98vw;
+    height: 97vh;
+}
+
+.box-top {
+    height: 10%;
+    width: 33%;
+}
+
+.box-bottom {
+    height: 80%;
+    width: 100%;
+    display: flex;
+}
+
+.nav-list {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+</style>
+```
+
+### src/components/ParentA.vue(二级路由A)
+
+```vue
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+
+let router = useRouter()
+function changeContentA01() {
+    router.push({ name: "A01" })
+}
+function changeContentA02() {
+    router.push({ name: "A02" })
+}
+function changeContentA03() {
+    router.push({ name: "A03" })
+}
+</script>
+
+
+<template>
+
+    <div class="bottom-left">
+        <button class="nav-itme" @click="changeContentA01">A01</button>
+        <button class="nav-itme" @click="changeContentA02">A02</button>
+        <button class="nav-itme" @click="changeContentA03">A03</button>
+
+    </div>
+    <div class="bottom-right">
+        <RouterView></RouterView>
+    </div>
+</template>
+
+<style scoped>
+.bottom-left {
+    height: 100%;
+    width: 20%;
+    background-color: yellowgreen;
+}
+
+.bottom-right {
+    height: 100%;
+    width: 80%;
+    background-color: orange;
+}
+</style>
+```
+
+### src/components/ParentB.vue(二级路由B)
+
+```vue
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+
+let router = useRouter()
+function changeContentB01() {
+    router.push({ name: "B01" })
+}
+function changeContentB02() {
+    router.push({ name: "B02" })
+}
+function changeContentB03() {
+    router.push({ name: "B03" })
+}
+</script>
+
+
+<template>
+
+    <div class="bottom-left">
+        <button class="nav-itme" @click="changeContentB01">B01</button>
+        <button class="nav-itme" @click="changeContentB02">B02</button>
+        <button class="nav-itme" @click="changeContentB03">B03</button>
+
+    </div>
+    <div class="bottom-right">
+        <RouterView></RouterView>
+    </div>
+</template>
+
+<style scoped>
+.bottom-left {
+    height: 100%;
+    width: 20%;
+    background-color: yellowgreen;
+}
+
+.bottom-right {
+    height: 100%;
+    width: 80%;
+    background-color: orange;
+}
+</style>
+```
+
+### src/components/ParentC.vue(二级路由C)
+
+```vue
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+
+let router = useRouter()
+function changeContentC01() {
+    router.push({ name: "C01" })
+}
+function changeContentC02() {
+    router.push({ name: "C02" })
+}
+function changeContentC03() {
+    router.push({ name: "C03" })
+}
+</script>
+
+
+<template>
+
+    <div class="bottom-left">
+        <button class="nav-itme" @click="changeContentC01">C01</button>
+        <button class="nav-itme" @click="changeContentC02">C02</button>
+        <button class="nav-itme" @click="changeContentC03">C03</button>
+
+    </div>
+    <div class="bottom-right">
+        <RouterView></RouterView>
+    </div>
+</template>
+
+<style scoped>
+.bottom-left {
+    height: 100%;
+    width: 20%;
+    background-color: yellowgreen;
+}
+
+.bottom-right {
+    height: 100%;
+    width: 80%;
+    background-color: orange;
+}
+</style>
+```
+
+### src/components/A01.vue......(三级路由)
+
+```vue
+<template>
+    I Am A ON.1
+</template>
+```
+
diff --git "a/\347\275\227\347\232\223\346\231\250/20260518-Vue\350\267\257\347\224\261\345\256\210\345\215\253.md" "b/\347\275\227\347\232\223\346\231\250/20260518-Vue\350\267\257\347\224\261\345\256\210\345\215\253.md"
new file mode 100644
index 0000000000000000000000000000000000000000..52304263fc1a3094a4bc1d48366dbba960b749f1
--- /dev/null
+++ "b/\347\275\227\347\232\223\346\231\250/20260518-Vue\350\267\257\347\224\261\345\256\210\345\215\253.md"
@@ -0,0 +1,20 @@
+## 笔记
+
+### 路由守卫
+
+#### 全局前置守卫
+- 所有路由跳转前都会执行
+- 三个参数：to 即将进入的路由、from 离开的路由、next 放行函数
+- 常用于登录权限判断，未登录拦截跳转到登录页
+
+```javascript
+router.beforeEach((to, from, next) => {
+  // 模拟登录判断
+  const isLogin = true
+  if (to.path !== '/login' && !isLogin) {
+    next('/login')
+  } else {
+    next()
+  }
+})
+```
\ No newline at end of file