如何在Vue 2组件中设置页面标题，支持加载、刷新及书签打开场景？

直接操作document.title是最可靠的方式，不用局限于路由meta的设置，结合组件生命周期和数据监听就能覆盖所有场景：

1. 组件内直接设置（覆盖刷新/书签加载场景） #

不管是页面刷新还是通过书签进入，组件都会重新挂载，在挂载完成后（拿到动态数据后）直接修改document.title：

Vue2 示例 #

export default {
  data() {
    return {
      dynamicContent: ''
    }
  },
  async mounted() {
    // 模拟获取动态数据（比如接口请求）
    const res = await this.$axios.get('/api/get-dynamic-content')
    this.dynamicContent = res.data.title

    // 直接设置页面标题
    document.title = `${this.dynamicContent} - 我的站点`
  },
  // 监听动态数据变化，确保标题实时更新
  watch: {
    dynamicContent(newVal) {
      if (newVal) {
        document.title = `${newVal} - 我的站点`
      }
    }
  }
}

Vue3 Composition API 示例 #

import { ref, onMounted, watch } from 'vue'
import axios from 'axios'

export default {
  setup() {
    const dynamicContent = ref('')

    const fetchData = async () => {
      const res = await axios.get('/api/get-dynamic-content')
      dynamicContent.value = res.data.title
    }

    onMounted(async () => {
      await fetchData()
      document.title = `${dynamicContent.value} - 我的站点`
    })

    // 监听数据变化更新标题
    watch(dynamicContent, (newVal) => {
      if (newVal) {
        document.title = `${newVal} - 我的站点`
      }
    })

    return { dynamicContent }
  }
}

2. 全局路由守卫补充（覆盖应用内导航+首次加载） #

在路由守卫里做基础标题兜底，同时确保首次进入时也能触发标题设置：

// router/index.js
router.afterEach((to) => {
  // 先设置基础标题（从路由meta取）
  let pageTitle = to.meta.baseTitle || '我的站点'
  
  // 如果组件已经设置过标题，就用组件的设置（避免覆盖动态内容）
  if (document.title !== '我的站点') { // 这里可以根据你的默认标题调整判断逻辑
    pageTitle = document.title
  }
  
  document.title = pageTitle
})

3. 根组件初始化处理 #

如果用了全局状态管理（Vuex/Pinia）存储动态标题，可以在根组件挂载时直接读取状态设置标题：

Vue2 根组件示例 #

export default {
  mounted() {
    this.updatePageTitle()
  },
  watch: {
    '$route': {
      immediate: true,
      handler() {
        this.updatePageTitle()
      }
    },
    '$store.state.dynamicTitle': {
      immediate: true,
      handler() {
        this.updatePageTitle()
      }
    }
  },
  methods: {
    updatePageTitle() {
      const dynamicPart = this.$store.state.dynamicTitle || ''
      const baseTitle = this.$route.meta.baseTitle || '我的站点'
      document.title = dynamicPart ? `${dynamicPart} - ${baseTitle}` : baseTitle
    }
  }
}

核心思路 #

• 不要只依赖this.$route.meta.pageTitle，直接操作document.title是最直接有效的方式
• 组件挂载完成后（异步数据加载完成后）设置标题，覆盖刷新/书签加载的场景
• 用watch监听动态数据变化，确保标题随数据实时更新
• 全局路由守卫做基础兜底，兼顾应用内导航和首次加载

内容的提问来源于stack exchange，提问作者iamsimonsmale