Vue JS中路由跳转/直接访问URL时如何正确显示对应页面标题

开发者阿泽

2026-8-29

问题原因

你现在标题不更新是两处代码逻辑失效共同导致的，不是单纯加监听就能解决：

现有getCurrentPageNameByPath方法完全不具备路径匹配能力：没有定义入参接收路径、路由映射只硬编码了1条、匹配逻辑写反（按名称查路径而非按路径查名称）、全程没有返回匹配结果，不管传入什么路径都只能拿到undefined，mounted里调用它等于无效执行。
仅在mounted钩子做了一次标题初始化：
- 直接输入URL访问时，虽然会触发mounted，但匹配方法拿不到正确标题，页面就会一直显示默认值TEST
- 应用内前端路由跳转时，导航抽屉是全局常驻组件，不会重新挂载，mounted不会重复执行，就算修好匹配方法，后续跳转页面标题也不会自动更新。

你确实需要添加路由监听，但必须先把路径匹配逻辑修复，否则加了监听也无法正常工作，具体修改步骤如下：

修复步骤

1. 重写路径匹配方法

删掉原来无效的getCurrentPageNameByPath，替换为可复用现有导航配置、自动匹配一级/二级路由的逻辑，同时统一处理路径末尾斜杠避免匹配误差：

getCurrentPageNameByPath(path) {
  // 归一化路径，消除末尾斜杠带来的匹配差异
  const normalizedPath = path.endsWith('/') && path.length > 1 ? path.slice(0, -1) : path

  // 先匹配无子菜单的一级导航
  const topMatch = this.items.find(item => {
    if (!item.links && item.to) {
      const itemPath = item.to.endsWith('/') && item.to.length > 1 ? item.to.slice(0, -1) : item.to
      return itemPath === normalizedPath
    }
    return false
  })
  if (topMatch) return topMatch.title

  // 再匹配有子菜单的二级导航
  for (const parent of this.items) {
    if (!parent.links) continue
    const childMatch = parent.links.find(link => {
      const linkPath = link.to.endsWith('/') && link.to.length > 1 ? link.to.slice(0, -1) : link.to
      return linkPath === normalizedPath
    })
    if (childMatch) return [parent.title, childMatch.title]
  }

  // 无匹配项返回默认标题
  return 'TEST'
},

2. 添加路由即时监听

在组件配置中添加$route的监听，开启immediate: true让它在组件初始化时立刻执行一次，同时覆盖后续路由跳转的场景，不用再在mounted里重复写初始化逻辑：

watch: {
  $route: {
    immediate: true,
    handler(to) {
      const matchTitle = this.getCurrentPageNameByPath(to.path)
      this.updatePageTitle(matchTitle)
    }
  }
},

3. 清理mounted冗余代码

把mounted里原来写的获取路径、设置标题的代码删掉，只保留抽屉断点判断逻辑即可：

mounted() {
  this.$nextTick(() => {
    if (this.$vuetify.breakpoint.mdAndDown) this.drawer = false
  })
},

补充说明

模板里导航项点击时手动调用updatePageTitle的逻辑可以保留，和路由监听不冲突；如果要精简代码也可以直接删掉，路由变化后watch会自动触发标题更新，不会出现延迟。

内容的提问来源于stack exchange，提问作者Gavin Teo Juen