可在路由守卫中通过 to.meta.title 动态设置 document.title：在 beforeeach 中判断 to.meta.title 是否存在，存在则赋值，否则 fallback 默认标题；支持中文、变量及模板拼接（如“页面名 - 系统名”），避免使用 aftereach。

直接在路由守卫里读取 to.meta.title，然后赋值给 document.title，就能让每个页面拥有自己独立、准确的浏览器标题。

路由配置中定义 meta.title

在定义路由时，为每个路由对象添加 meta 字段，并设置 title 属性。这是后续动态设置标题的数据来源。

• 确保每个需要独立标题的路由都配有 meta: { title: 'xxx' }
• 支持中文、英文或带变量的字符串（如 '用户详情 - ID: ${id}'，变量需在守卫中拼接）
• 未配置 title 的路由可 fallback 到默认标题，避免空白

用 beforeEach 守卫统一处理标题

beforeEach 是最常用且合适的时机——跳转前就完成标题更新，用户看到页面时标题已就绪。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 在 router.beforeEach 中判断 to.meta.title 是否存在
• 存在则执行 document.title = to.meta.title
• 不存在则设为默认值，例如 document.title = '后台管理系统'
• 务必调用 next()，否则导航会卡住

进阶：支持标题模板与系统名拼接

实际项目常要求“页面名 - 系统名”格式，比如 “订单管理 - AdminPro”。这时可借助工具函数封装逻辑。

• 新建 utils/get-page-title.js，导出一个接收 pageTitle 的函数
• 函数内部拼接系统默认名（如从 settings.js 读取），并处理空值
• 在守卫中调用：document.title = getPageTitle(to.meta.title)
• 这样既保持一致性，又便于后期统一修改品牌名称

注意 afterEach 不适合设标题

afterEach 在跳转完成后才触发，用户可能先看到旧标题再闪动更新，体验不稳。

• 它没有 next 参数，纯属通知型钩子
• 仅适合做日志上报、埋点统计等无副作用操作
• 标题设置必须放在 beforeEach 或组件内 mounted 中

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！