如何通过Vue Router动态设置页面h1标题？$emit尝试无效

嘿，我来帮你搞定这个问题！你用$emit没生效，其实是因为路由切换时组件的生命周期和组件间传值的时机没匹配上——毕竟路由组件是动态挂载/销毁的，$emit的信号很可能没被父组件及时接住。咱们换个更直接靠谱的思路，利用Vue Router自带的路由元信息（meta.title）来实现动态h1标题，下面给你两种常用方案：

方案一：全局监听路由变化（适合统一布局的h1） #

如果你的h1是放在全局布局组件（比如App.vue）里，统一显示页面标题，那直接在根组件里监听路由变化就好：

Vue 2 版本 #

<template>
  <div id="app">
    <!-- 动态渲染h1标题 -->
    <h1>{{ pageTitle }}</h1>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageTitle: ''
    }
  },
  mounted() {
    // 页面初始化时设置初始标题
    this.pageTitle = this.$route.meta.title || '默认标题'
  },
  watch: {
    // 监听路由切换，更新标题
    '$route'(to) {
      this.pageTitle = to.meta.title || '默认标题'
    }
  }
}
</script>

Vue 3 组合式API版本 #

<template>
  <div id="app">
    <h1>{{ pageTitle }}</h1>
    <router-view></router-view>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const pageTitle = ref('')

// 初始化标题
pageTitle.value = route.meta.title || '默认标题'

// 监听路由元信息里的title变化
watch(
  () => route.meta.title,
  (newTitle) => {
    pageTitle.value = newTitle || '默认标题'
  },
  { immediate: true } // 立即执行一次监听回调
)
</script>

方案二：在单个页面组件中直接使用（适合页面自定义h1位置） #

如果每个页面的h1位置不一样，或者需要结合页面内的其他动态内容，直接在组件里通过$route（Vue2）或useRoute（Vue3）获取meta.title就行，不用额外传值：

Vue 2 版本 #

const dashboard = { 
  template: `<div>
    <h1>{{ $route.meta.title }}</h1>
    DASHBOARD内容
  </div>` 
}

const about = { 
  template: `<div>
    <h1>{{ $route.meta.title }}</h1>
    ABOUT内容
  </div>` 
}

Vue 3 版本 #

import { useRoute } from 'vue-router'

const dashboard = {
  setup() {
    const route = useRoute()
    return { route }
  },
  template: `<div>
    <h1>{{ route.meta.title }}</h1>
    DASHBOARD内容
  </div>`
}

为什么$emit没生效？ #

简单说就是时机问题：路由切换时，旧组件会被销毁，新组件挂载，如果你在组件mounted钩子中用$emit传值，父组件可能还没完成监听绑定，或者组件销毁时$emit的信号直接丢失了。而直接利用路由元信息是全局可访问的，不需要组件间的通信，自然更稳定。

另外提醒一句：记得给没有配置meta.title的路由设置默认标题，避免h1显示空白哦～

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