diff --git a/docs/reference/plugin/plugins/layout.md b/docs/reference/plugin/plugins/layout.md
index 635ca324..9ee39526 100644
--- a/docs/reference/plugin/plugins/layout.md
+++ b/docs/reference/plugin/plugins/layout.md
@@ -366,11 +366,12 @@ function useTitle(title: string | Ref<string>): void;
 当使用多页签模式时，在页面中使用 `useTitle` 可以自定义页面标签：
 ```vue
 <script setup>
-import { ref } from 'vue';
-import { useRoute, useTitle } from '@fesjs/fes';
+import { useRoute, useTabTitle } from '@fesjs/fes';
 
-const title = ref(`详情-${route.params?.id}`);
-useTitle(title);
+const titleRef = useTabTitle(`详情-${route.params?.id}`);
+
+//如果要更新
+titleRef.value = "changed"
 </script>
 ```
 
diff --git a/packages/fes-plugin-layout/src/index.js b/packages/fes-plugin-layout/src/index.js
index 798e5d0c..1870e1e6 100644
--- a/packages/fes-plugin-layout/src/index.js
+++ b/packages/fes-plugin-layout/src/index.js
@@ -75,7 +75,7 @@ export default (api) => {
 
     api.addPluginExports(() => [
         {
-            specifiers: ['Page', 'useTitle'],
+            specifiers: ['Page', 'useTabTitle'],
             source: join(namespace, 'index.js'),
         },
     ]);
diff --git a/packages/fes-plugin-layout/src/runtime/index.js b/packages/fes-plugin-layout/src/runtime/index.js
index 6b680466..5117f920 100644
--- a/packages/fes-plugin-layout/src/runtime/index.js
+++ b/packages/fes-plugin-layout/src/runtime/index.js
@@ -1,2 +1,2 @@
 export { default as Page } from './views/page.vue';
-export { useTitle } from './useTitle';
+export { useTabTitle } from './useTitle';
diff --git a/packages/fes-plugin-layout/src/runtime/useTitle.js b/packages/fes-plugin-layout/src/runtime/useTitle.js
index 87ad8108..e56636e4 100644
--- a/packages/fes-plugin-layout/src/runtime/useTitle.js
+++ b/packages/fes-plugin-layout/src/runtime/useTitle.js
@@ -1,11 +1,18 @@
+import { reactive, ref } from 'vue';
 import { useRoute } from '@@/core/coreExports';
-import { reactive } from 'vue';
 
 const cache = reactive(new Map());
 
 export const getTitle = (path) => cache.get(path);
 
-export const useTitle = (title) => {
+export const deleteTitle = (patch) => cache.delete(patch);
+
+export const useTabTitle = (title) => {
     const route = useRoute();
-    cache.set(route.path, title);
+    const titleRef = ref(title);
+    const path = route.path;
+
+    cache.set(path, titleRef);
+
+    return titleRef;
 };
diff --git a/packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue b/packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue
index 268af3f5..1066fedc 100644
--- a/packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue
+++ b/packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue
@@ -31,7 +31,7 @@ import { FTabs, FTabPane, FDropdown } from '@fesjs/fes-design';
 import { ReloadOutlined, MoreOutlined } from '@fesjs/fes-design/icon';
 import { useRouter, useRoute } from '@@/core/coreExports';
 import { transTitle } from '../helpers/pluginLocale';
-import { getTitle } from '../useTitle';
+import { getTitle, deleteTitle } from '../useTitle';
 import Page from './page.vue';
 
 let i = 0;
@@ -117,6 +117,7 @@ export default {
             list.splice(index, 1);
             pageList.value = list;
             pageRef.value.removeKeepAlive(selectedPage.name);
+            deleteTitle(selectedPage.path);
         };
         const reloadPage = (path) => {
             const selectedPage = findPage(path || unref(route.path));
diff --git a/packages/fes-plugin-layout/types.d.ts b/packages/fes-plugin-layout/types.d.ts
index fd4e78b6..e33b2e46 100644
--- a/packages/fes-plugin-layout/types.d.ts
+++ b/packages/fes-plugin-layout/types.d.ts
@@ -12,7 +12,7 @@ interface Menu {
 
 export const Page: Component;
 
-export function useTitle(title: string | Ref<string>): void;
+export function useTabTitle(title: string | Ref<string>): void;
 
 interface LayoutRuntimeConfig {
     footer?: string;
diff --git a/packages/fes-template/src/pages/menuTest/@id.vue b/packages/fes-template/src/pages/menuTest/@id.vue
index e05530dc..1b6e397e 100644
--- a/packages/fes-template/src/pages/menuTest/@id.vue
+++ b/packages/fes-template/src/pages/menuTest/@id.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="page">menuTest: {{ route.params }}</div>
+    <div class="page">menuTest: {{ route.params }} <input style="border: 1px solid red" /></div>
 </template>
 <config>
 {
@@ -7,15 +7,13 @@
 }
 </config>
 <script>
-import { ref } from 'vue';
-import { useRoute, useTitle } from '@fesjs/fes';
+import { useRoute, useTabTitle } from '@fesjs/fes';
 
 export default {
     components: {},
     setup() {
         const route = useRoute();
-        const title = ref(`详情-${route.params?.id}`);
-        useTitle(title);
+        const title = useTabTitle(`详情-${route.params?.id}`);
 
         setTimeout(() => {
             title.value = `详情-${route.params?.id}-changed`;
diff --git a/packages/fes-template/src/pages/menuTest/index.vue b/packages/fes-template/src/pages/menuTest/index.vue
index c6683079..9cf15ba7 100644
--- a/packages/fes-template/src/pages/menuTest/index.vue
+++ b/packages/fes-template/src/pages/menuTest/index.vue
@@ -1,5 +1,12 @@
 <template>
-    <div class="page">menuTest-index</div>
+    <div class="page">
+        menuTest-index
+        <div style="display: flex; flex-direction: column">
+            <router-link to="/menuTest/1">Go to 1</router-link>
+            <router-link to="/menuTest/2">Go to 2</router-link>
+            <router-link to="/menuTest/3">Go to 3</router-link>
+        </div>
+    </div>
 </template>
 <config>
 {
diff --git a/packages/fes-template/src/pages/menuTest/layout.vue b/packages/fes-template/src/pages/menuTest/layout.vue
deleted file mode 100644
index 10c8f24a..00000000
--- a/packages/fes-template/src/pages/menuTest/layout.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-    <div style="display: flex; flex-direction: column">
-        <router-link to="/menuTest/1">Go to 1</router-link>
-        <router-link to="/menuTest/2">Go to 2</router-link>
-        <router-link to="/menuTest/3">Go to 3</router-link>
-    </div>
-    <router-view />
-</template>