diff --git a/vue/vue3/The01/The01/package-lock.json b/vue/vue3/The01/The01/package-lock.json
index 276e6ee..ffb1a98 100644
--- a/vue/vue3/The01/The01/package-lock.json
+++ b/vue/vue3/The01/The01/package-lock.json
@@ -9,7 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "vite-plugin-vue-setup-extend": "^0.4.0",
-        "vue": "^3.5.13"
+        "vue": "^3.5.13",
+        "vue-router": "^4.5.0"
       },
       "devDependencies": {
         "@tsconfig/node22": "^22.0.0",
@@ -1390,6 +1391,12 @@
         "he": "^1.2.0"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "license": "MIT"
+    },
     "node_modules/@vue/devtools-core": {
       "version": "7.6.7",
       "resolved": "https://registry.npmmirror.com/@vue/devtools-core/-/devtools-core-7.6.7.tgz",
@@ -3018,6 +3025,21 @@
         }
       }
     },
+    "node_modules/vue-router": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.5.0.tgz",
+      "integrity": "sha512-HDuk+PuH5monfNuY+ct49mNmkCRK4xJAV9Ts4z9UFc4rzdDnxQLyCMGGc8pKhZhHTVzfanpNwB/lwqevcBwI4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/vue-tsc": {
       "version": "2.1.10",
       "resolved": "https://registry.npmmirror.com/vue-tsc/-/vue-tsc-2.1.10.tgz",
diff --git a/vue/vue3/The01/The01/package.json b/vue/vue3/The01/The01/package.json
index f488b3e..7b1f5b7 100644
--- a/vue/vue3/The01/The01/package.json
+++ b/vue/vue3/The01/The01/package.json
@@ -12,7 +12,8 @@
   },
   "dependencies": {
     "vite-plugin-vue-setup-extend": "^0.4.0",
-    "vue": "^3.5.13"
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
   },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.0",
diff --git a/vue/vue3/The01/The01/src/App.vue b/vue/vue3/The01/The01/src/App.vue
index aaee772..2b429fa 100644
--- a/vue/vue3/The01/The01/src/App.vue
+++ b/vue/vue3/The01/The01/src/App.vue
@@ -1,22 +1,73 @@
 <template>
+  <div class="app">
+    <h2>Vue路由测试</h2>
+    <!-- 导航区 -->
+    <div class="navigate">
+      <RouterLink to="/home" calss="active">首页</RouterLink>
+      <RouterLink to="/news">新闻</RouterLink>
+      <RouterLink to="/about">关于</RouterLink>
+    </div>
+
+
+    <!-- 展示区 -->
+    <div class="main-content">
+      <!-- 此处展示 -->
+      <RouterView></RouterView>
+
+    </div>
 
-  <div>
-    <Person></Person>
   </div>
 </template>
 
-<script >
-    import Person from './components/Person.vue'
+<script lang="ts" setup name="App">
+import { RouterView,RouterLink } from 'vue-router';
 
-    export default {
-    name: 'App',
-    // 注册组件
-    components: {
-        Person
-    }
-    }
 </script>
 
 <style>
-
+    /* App */
+  .title {
+    text-align: center;
+    word-spacing: 5px;
+    margin: 30px 0;
+    height: 70px;
+    line-height: 70px;
+    background-image: linear-gradient(45deg, gray, white);
+    border-radius: 10px;
+    box-shadow: 0 0 2px;
+    font-size: 30px;
+  }
+  .navigate {
+    display: flex;
+    justify-content: space-around;
+    margin: 0 100px;
+  }
+  .navigate a {
+    display: block;
+    text-align: center;
+    width: 90px;
+    height: 40px;
+    line-height: 40px;
+    border-radius: 10px;
+    background-color: gray;
+    text-decoration: none;
+    color: white;
+    font-size: 18px;
+    letter-spacing: 5px;
+  }
+  .navigate a.xiaozhupeiqi {
+    background-color: #64967E;
+    color: #ffc268;
+    font-weight: 900;
+    text-shadow: 0 0 1px black;
+    font-family: 微软雅黑;
+  }
+  .main-content {
+    margin: 0 auto;
+    margin-top: 30px;
+    border-radius: 10px;
+    width: 90%;
+    height: 400px;
+    border: 1px solid;
+  }
 </style>
diff --git a/vue/vue3/The01/The01/src/components/About.vue b/vue/vue3/The01/The01/src/components/About.vue
new file mode 100644
index 0000000..38b33dd
--- /dev/null
+++ b/vue/vue3/The01/The01/src/components/About.vue
@@ -0,0 +1,20 @@
+<template>
+    <div class="about">
+      <h2>大家好，欢迎来到尚硅谷直播间</h2>
+    </div>
+  </template>
+  
+  <script setup lang="ts" name="About">
+  
+  </script>
+  
+  <style scoped>
+  .about {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    color: rgb(85, 84, 84);
+    font-size: 18px;
+  }
+  </style>
\ No newline at end of file
diff --git a/vue/vue3/The01/The01/src/components/Home.vue b/vue/vue3/The01/The01/src/components/Home.vue
new file mode 100644
index 0000000..c589d2c
--- /dev/null
+++ b/vue/vue3/The01/The01/src/components/Home.vue
@@ -0,0 +1,18 @@
+<template>
+    <div class="home">
+      <img src="http://www.atguigu.com/images/index_new/logo.png" alt="">
+    </div>
+  </template>
+  
+  <script setup lang="ts" name="Home">
+  
+  </script>
+  
+  <style scoped>
+    .home {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100%;
+    }
+  </style>
\ No newline at end of file
diff --git a/vue/vue3/The01/The01/src/components/News.vue b/vue/vue3/The01/The01/src/components/News.vue
new file mode 100644
index 0000000..449161f
--- /dev/null
+++ b/vue/vue3/The01/The01/src/components/News.vue
@@ -0,0 +1,43 @@
+<template>
+    <div class="news">
+      <ul>
+        <li><a href="#">新闻001</a></li>
+        <li><a href="#">新闻002</a></li>
+        <li><a href="#">新闻003</a></li>
+        <li><a href="#">新闻004</a></li>
+      </ul>
+    </div>
+  </template>
+  
+  <script setup lang="ts" name="News">
+    
+  </script>
+  
+  <style scoped>
+  /* 新闻 */
+  .news {
+    padding: 0 20px;
+    display: flex;
+    justify-content: space-between;
+    height: 100%;
+  }
+  .news ul {
+    margin-top: 30px;
+    list-style: none;
+    padding-left: 10px;
+  }
+  .news li>a {
+    font-size: 18px;
+    line-height: 40px;
+    text-decoration: none;
+    color: #64967E;
+    text-shadow: 0 0 1px rgb(0, 84, 0);
+  }
+  .news-content {
+    width: 70%;
+    height: 90%;
+    border: 1px solid;
+    margin-top: 20px;
+    border-radius: 10px;
+  }
+  </style>
\ No newline at end of file
diff --git a/vue/vue3/The01/The01/src/components/Person.vue b/vue/vue3/The01/The01/src/components/Person.vue
deleted file mode 100644
index f383bf6..0000000
--- a/vue/vue3/The01/The01/src/components/Person.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-
-  <div class="person">
-    <h2>姓名：{{ person.name }}</h2>
-    <p>年龄：{{ person.age }}</p>
-    <p>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}</p>
-    <button @click="changeName">修改名字</button>
-    <button @click="changeAge">修改年龄</button>
-    <button @click="changeC1">修改第一台车</button>
-    <button @click="changeC2">修改第一台车</button>
-    <button @click="changeCar">修改整个车</button>
-    
-  </div>
-
-</template>
-
-<script setup name="Person">
-import { reactive,watch } from 'vue'
-
-let person = reactive({
-  name: '张三',
-  age: 18,
-  car:{
-    c1: '奔驰',
-    c2: '宝马'
-  }
-})
-
-//
-
-// 方法
-function changeName(){
-    person.name += '~'
-  }
-  function changeAge(){
-    person.age += 1
-  }
-  function changeC1(){
-    person.car.c1 = '奥迪'
-  }
-  function changeC2(){
-    person.car.c2 = '大众'
-  }
-  function changeCar(){
-    person.car = {c1:'雅迪',c2:'爱玛'}
-  }
-
-  // 监视，情况四：监视响应式对象中的某个属性，且该属性是基本类型的，要写成函数式
-  /* watch(()=> person.name,(newValue,oldValue)=>{
-    console.log('person.name变化了',newValue,oldValue)
-  }) */
-
-  // 监视，情况四：监视响应式对象中的某个属性，且该属性是对象类型的，可以直接写，也能写函数，更推荐写函数
-  watch(()=>person.car,(newValue,oldValue)=>{
-    console.log('person.car变化了',newValue,oldValue)
-  },{deep:true})
-
-
-
-
-
-</script>
-
-<style>
-
-</style>
diff --git a/vue/vue3/The01/The01/src/main.ts b/vue/vue3/The01/The01/src/main.ts
index 5fd8cb7..d983695 100644
--- a/vue/vue3/The01/The01/src/main.ts
+++ b/vue/vue3/The01/The01/src/main.ts
@@ -3,4 +3,12 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 
-createApp(App).mount('#app')
+// 引入路由器
+import router from './router/index'
+
+// 创建一个应用
+const app = createApp(App)
+//使用路由
+app.use(router)
+// 挂载整个应用到app容器中
+app.mount('#app')
\ No newline at end of file
diff --git a/vue/vue3/The01/The01/src/router/index.ts b/vue/vue3/The01/The01/src/router/index.ts
new file mode 100644
index 0000000..130fd96
--- /dev/null
+++ b/vue/vue3/The01/The01/src/router/index.ts
@@ -0,0 +1,32 @@
+// 创建一个路由器，暴露出去
+// 导入路由组件
+import { createRouter, createWebHashHistory,createWebHistory } from 'vue-router'
+//引入每个可能要呈现的组件
+import Home from '@/components/Home.vue'
+import About from '@/components/About.vue'
+import News from '@/components/News.vue'
+
+// 创建路由
+
+const router = createRouter({
+    // 路由模式
+    history:createWebHistory(),
+    routes:[
+        // 路由配置规则
+        {
+            path:'/home',
+            component:Home
+        },
+        {
+            path:'/about',
+            component:About
+        },
+        {
+            path:'/news',
+            component:News
+        }
+    ]
+})
+
+// 暴露出去
+export default router
diff --git a/vue/vue3/learn.md b/vue/vue3/learn.md
index df43b70..39458c2 100644
--- a/vue/vue3/learn.md
+++ b/vue/vue3/learn.md
@@ -503,6 +503,18 @@ function changeName(){
 
 
 
+```
+
+```
+
+
+
+
+
+
+
+
+
 ### 路由
 
 以实现单页面多应用
\ No newline at end of file