usePageTitle 函数封装了页面标题的响应式管理，支持字符串或 ref 输入、自动同步、手动设置及 SSR 兼容。
在 Vue 3 的 Composition API 中，封装一个修改页面标题的函数非常简单，核心是利用 document.title 并结合响应式能力实现自动同步或手动调用。
直接封装可复用的 usePageTitle 函数
推荐在 composables/usePageTitle.js（或 ts）中定义：
- 支持传入字符串或 ref 响应式值，自动监听变化并更新 title
- 返回当前标题的 ref，便于读取或双向控制
- 兼容 SSR（服务端渲染）场景，避免在服务端执行
document操作
示例代码：
import { ref, watch, onMounted, isRef } from 'vue'
<p>export function usePageTitle(initialTitle = '') {
const title = ref(initialTitle)</p><p>const updateTitle = (newTitle) => {
if (typeof window !== 'undefined' && document) {
document.title = newTitle
}
}</p><p>// 响应式更新：当 title ref 变化时自动设置 document.title
watch(title, (val) => {
updateTitle(val)
}, { immediate: true })</p><p>// 提供手动设置方法
const setTitle = (value) => {
if (isRef(value)) {
title.value = value.value
} else {
title.value = value
}
}</p><p>return { title, setTitle }
}在 setup 中使用
在组件中调用即可，支持静态设置或绑定响应式数据：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
- 静态设置：
setTitle('用户列表') - 动态绑定：
title.value = `${userName.value} - 后台管理` - 配合路由参数（如从
useRoute()获取）实时更新标题
示例：
import { usePageTitle } from '@/composables/usePageTitle'
import { useRoute } from 'vue-router'
<p>export default {
setup() {
const route = useRoute()
const { title, setTitle } = usePageTitle()</p><pre class="brush:php;toolbar:false;">// 路由变化时更新标题
watch(() => route.name, (name) => {
const map = {
'user-list': '用户管理',
'user-detail': `用户详情 - ${route.params.id}`
}
setTitle(map[name] || '后台系统')
})
return { title }} }
进阶：结合路由元信息自动设置标题
更通用的做法是，在路由配置中定义 meta.title，然后统一处理：
- 在全局路由守卫（
router.beforeEach）中调用usePageTitle或直接设 title - 或在页面组件内用
computed读取route.meta.title并赋给title.value
例如：
const { title } = usePageTitle()
const route = useRoute()
title.value = route.meta.title || '默认标题'注意事项
- 不要在
setup外部（如模块顶层）直接操作document.title，否则可能触发多次或丢失响应性 - 若项目用了 SEO 相关方案（如 Nuxt、VuePress），需额外处理服务端 title 渲染逻辑
- 中文标题无需编码，但含特殊符号时建议保持语义清晰，避免截断或乱码
