嘿，各位前端小伙伴！有没有遇到过这样的尴尬场景：点击导航栏跳转页面，却发现浏览器标签页的标题还是”首页”，而你已经到了”关于我们”页面？别慌，这其实是个很常见的问题，但解决起来超简单！今天就来聊聊如何基于 Vue Router 实现动态切换导航栏标题，让你的页面标题不再”迷路”。
方法一：最简单直接的 meta 属性法
Vue Router 早就贴心地为我们准备了 meta 属性，专门用来设置页面标题。在路由配置里加个 title，然后在路由守卫里读取它，搞定！
// router/index.js
const routes = [
{
path: '/',
name: 'home',
component: Home,
meta: { title: '首页 - 你的网站名' }
},
{
path: '/about',
name: 'about',
component: About,
meta: { title: '关于我们 - 你的网站名' }
}
]
// main.js
router.beforeEach((to, from, next) => {
if (to.meta.title) {
document.title = to.meta.title
}
next()
})
这方法简直不要太简单，就像点外卖一样方便——选好菜（title），下单（配置），坐等送达（自动更新）。
方法二：全局混入法（适合小项目）
如果你的项目不大，想偷个懒，可以用全局混入。在 Vue 实例里混入一个方法，让所有组件都能自动设置标题。
// main.js
Vue.mixin({
mounted() {
if (this.$options.title) {
document.title = this.$options.title
}
}
})
// 在组件中
export default {
title: '我的页面标题',
// 其他代码...
}
不过要注意，这个方法有点”一视同仁”，所有组件都会用这个规则，如果标题需求复杂，可能不太适合。
方法三：自定义指令法（炫技必备）
喜欢在代码里玩点花活的小伙伴看过来！用自定义指令来设置标题，简直不要太酷。
// main.js
Vue.directive('title', {
inserted: function(el, binding) {
document.title = binding.value
}
})
// 在模板中
<template>
<div v-title="pageTitle">内容</div>
</template>
虽然这个方法有点小众，但用在特定场景下，绝对能让同事眼前一亮——”哇，这哥们儿还挺会玩！”
方法四：路由 afterEach 钩子法
在 Vue Router 中，afterEach 钩子是一个好帮手，它会在每次路由切换后执行，适合做些”收尾工作”。
router.afterEach((to, from) => {
document.title = to.meta.title || '默认标题'
})
这个方法比 beforeEach 更”后知后觉”，但对标题更新来说，刚好合适。就像你吃完饭才想起要刷牙，虽然迟了点，但总比不刷强。
方法五：Vue 3 的 useTitle 组合式 API（推荐）
Vue 3 的组合式 API 让我们能更优雅地处理这种需求。封装一个 useTitle 函数，让标题管理变得简单明了。
// useTitle.js
import { ref, onMounted, onUnmounted } from 'vue'
export function useTitle(initialTitle) {
const title = ref(initialTitle)
const updateTitle = () => {
document.title = title.value
}
onMounted(updateTitle)
onUnmounted(updateTitle)
return title
}
在组件中使用：
import { useTitle } from './useTitle'
export default {
setup() {
const pageTitle = useTitle('初始标题')
// 通过修改 pageTitle 的值来更新标题
pageTitle.value = '新标题'
return { pageTitle }
}
}
这个方法最符合 Vue 3 的设计理念，代码也更优雅，强烈推荐！
小贴士：避免标题重复
在实际项目中，经常会出现标题重复的问题，比如首页和另一个页面标题相同。这时候可以在 title 里加上一些标识：
meta: { title: '首页 - 你的网站名' }
这样浏览器标签页就能清楚地告诉你，这是”首页 – 你的网站名”，而不是简单的”首页”。
总结一下
动态切换导航栏标题其实很简单，关键是要理解 Vue Router 的路由守卫机制。对于大多数项目，使用 meta 属性配合 beforeEach 或 afterEach 钩子就足够了。如果你的项目比较复杂，或者想用更现代的方式，可以考虑 Vue 3 的组合式 API。
记住，一个好的标题不仅能提升用户体验，还能让你的网站在浏览器标签页中脱颖而出——毕竟，谁不想在众多标签中一眼找到自己的网站呢？
