单页应用中动态更新页面标题需通过 document.title 赋值并配合路由变化触发；Vue Router 用 beforeEach 或 useRoute + watch 设置，Nuxt 推荐 useHead；React Router v6 用 useEffect 监听 useLocation；原生场景监听 popstate/hashchange；注意避免守卫覆盖、PWA 缓存、iOS 冻结及 SEO 限制。
单页应用（SPA）中动态更新页面标题，核心是用 document.title 赋值，但必须配合路由变化信号触发，不能只靠手动写死。框架通常已封装逻辑，但底层都依赖这个属性。
Vue Router 中正确更新标题
Vue Router 不会自动同步 title，需在路由守卫或组合式 API 中主动设置：
- 使用
beforeEach全局守卫：根据to.meta.title或路径映射表统一设document.title - 组件内用
useRoute+watch监听路由变化，避免重复赋值 - 若用了 Nuxt，优先配置
useHead({ title: 'xxx' })，它会自动处理 SSR 和客户端同步
React Router v6 的推荐做法
不再提供 onEnter 类钩子，改用 useEffect 监听位置变更：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 导入
useLocation，在useEffect中读取location.pathname - 查表匹配标题（如
{ '/': '首页', '/blog': '博客' }），然后赋值document.title - 确保该 effect 不依赖其他状态，避免不必要的重设
原生 History API 场景下的处理
没用框架时，靠监听浏览器历史事件来捕获跳转：
- 监听
popstate（前进/后退）和hashchange（Hash 模式） - 每次触发后解析当前 URL，再从预定义映射对象中获取对应标题
- 注意：
history.pushState()的第二个参数（title）在所有主流浏览器中均被忽略，必须显式调用document.title = ...
容易踩坑的几个关键点
标题“看似改了却没生效”，往往不是代码问题，而是环境干扰：
- 框架路由库（如 Vue Router）后续钩子覆盖了你的赋值，应把设置逻辑放在守卫末尾或使用
nextTick延迟执行 - PWA 的 service worker 可能缓存旧 HTML，导致首次加载标题仍是服务端初始值，需检查
navigationPreload回调中是否重设 - iOS Safari 后台标签页冻结 JS，切回时 title 回退到原始 HTML 值，可监听
visibilitychange事件恢复 - SEO 不认
document.title，搜索引擎抓取的是 HTML 源码中的
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
