直接修改 document.title 可实时更新浏览器标签页标题，推荐用 addeventlistener 在 dom 加载后绑定按钮事件，结合 data-title 属性实现多按钮动态标题，并配合 history.replacestate 保持历史栈一致，ssr 环境下应优先使用框架提供的标题设置方法。
点击按钮直接改 document.title
页面标题栏文本由 document.title 控制，修改它会立刻反映在浏览器标签页上。不需要刷新、不依赖框架，原生 JS 一行就能搞定。
常见错误是把按钮绑定写成 onclick="document.title = '新标题'" 后发现无效——原因通常是 HTML 加载时 JS 还没执行，或者内联事件被 CSP 策略拦截。稳妥做法是用 addEventListener 在 DOM 加载后绑定。
- 确保按钮存在后再绑定事件，推荐放在
<script></script>块末尾或使用DOMContentLoaded监听 - 标题内容里避免非法字符（如
\0、控制字符），否则部分浏览器可能静默截断 - 移动端 Safari 对频繁修改
document.title有轻微延迟，连续快速点击可能丢帧
带参数的动态标题：从按钮 data 属性读取值
多个按钮对应不同标题时，硬编码 document.title = 'xxx' 不可维护。更合理的方式是让每个按钮自带目标标题，通过 dataset 提取。
示例结构：
<button type="button" data-title="仪表盘">切换到仪表盘</button> <button type="button" data-title="设置">进入设置页</button>
JS 绑定逻辑：
document.querySelectorAll('button[data-title]').forEach(btn => {
btn.addEventListener('click', () => {
document.title = btn.dataset.title;
});
});
-
data-title值会被自动转为字符串，无需额外toString() - 如果按钮本身文字和标题不一致（比如含图标或省略号），务必用
dataset而非textContent，避免格式干扰 - 注意空格和换行：HTML 中
data-title=" 设置 "会保留首尾空格，建议在 JS 中用.trim()
修改标题后同步更新 history.state（防止前进/后退失效）
只改 document.title 不会影响浏览器历史栈，用户点后退时标题不会恢复——这在单页应用中尤其突兀。要让标题与 URL 状态一致，需配合 history.replaceState()。
- 若当前页面 URL 不变，用
history.replaceState(null, newTitle, location.href)更新 state 中的 title 字段 - 不要用
pushState()，否则每次点击都新增一条历史记录，导致后退堆栈膨胀 - 部分旧版 IE 不支持
replaceState第二个参数（title），实际兼容性取决于浏览器，但现代浏览器均支持 - 如果已监听
popstate事件来响应后退，记得在该回调里也同步设置document.title = event.state?.title || defaultTitle
服务端渲染页面中要注意初始标题覆盖问题
如果页面由 SSR（如 Next.js、Nuxt）生成，<title></title> 标签已在 HTML 中写死。JS 修改 document.title 有效，但若后续触发客户端路由跳转，框架可能再次覆盖标题——这时单纯改 document.title 会被重置。
真正可靠的方案是：在框架允许的生命周期内调用其提供的标题设置方法（如 Next.js 的 useRouter + setOptions，或 Nuxt 的 useHead），而非绕过框架直操作 DOM。
临时应急仍可用 document.title，但上线前必须确认框架是否接管了 title 控制权。否则用户看到的标题可能在跳转后“闪回”到旧值。
这个点容易被忽略：本地测试时一切正常，一部署到 SSR 环境就失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
