Vue Router 怎么使用全局后置守卫修改页面标题-Vue.js-PHP中文网

vue router 的全局后置守卫 router.aftereach 适合设置页面标题，因其在路由确认完成、dom 更新后执行，可安全使用 to.meta.title，避免前置守卫的异步风险与跳转干扰。

vue router 怎么使用全局后置守卫修改页面标题

Vue Router 的全局后置守卫（router.afterEach）本身不支持修改导航结果（比如不能 next() 或拦截跳转），但它适合在路由切换完成、DOM 更新后执行副作用操作，比如统一设置页面标题。

为什么用后置守卫设标题？

因为此时路由已确认完成，to.meta.title 可靠可用，且不会干扰导航流程。相比前置守卫（beforeEach），它更安全、无异步风险，也避免因标题设置逻辑出错导致白屏或跳转失败。

在路由配置中定义页面标题

给每个路由配置添加 meta.title 字段，作为页面标题的来源：

const routes = [
  {
    path: '/',
    component: Home,
    meta: { title: '首页' }
  },
  {
    path: '/user/:id',
    component: User,
    meta: { title: '用户详情' }
  },
  {
    path: '/about',
    component: About,
    meta: { title: '关于我们' }
  }
]

使用 afterEach 设置 document.title

在创建路由器实例后，调用 router.afterEach 监听每次成功导航：

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

import { createRouter } from 'vue-router'
<p>const router = createRouter({ /<em> ... </em>/ })</p><p>router.afterEach((to) => {
// 优先取路由元信息中的 title
const title = to.meta.title || '我的网站'
document.title = title
})</p>

进阶：支持动态标题（如带用户名）

若标题需根据路由参数或接口数据生成，可在组件内配合 onMounted + useRoute 实时更新，或在后置守卫中做简单拼接：

基础动态：用 to.params 拼接，例如 to.meta.title + ' - ' + to.params.id
复杂动态（如需 API 获取用户名）：不建议在 afterEach 中发请求（会阻塞不了，也不该阻塞），应由组件自己处理，并在获取成功后手动更新 document.title
保持一致性：可封装一个 updateTitle(to) 函数，在 afterEach 和组件内部复用

不复杂但容易忽略：确保标题设置逻辑在所有环境（包括 SSR 后的客户端激活）都生效，纯客户端逻辑无需额外处理；如用 Nuxt 等框架，则应遵循其约定（如 useHead）。