vue实现标题导航
Vue 实现标题导航的方法
动态路由结合导航菜单
通过 Vue Router 动态生成路由，结合 v-for 循环渲染导航菜单。路由配置中定义标题信息，组件内使用 $route.meta 获取标题数据。
// router.js
const routes = [
{
path: '/home',
component: Home,
meta: { title: '首页' }
},
{
path: '/about',
component: About,
meta: { title: '关于我们' }
}
]<!-- Navigation.vue -->
<template>
<nav>
<router-link
v-for="route in $router.options.routes"
:key="route.path"
:to="route.path"
>
{{ route.meta.title }}
</router-link>
</nav>
</template>监听路由变化更新标题
在根组件或布局组件中使用路由守卫，监听路由变化并动态修改页面标题。这种方式适合需要同步浏览器标签页标题的场景。
// main.js
router.beforeEach((to, from, next) => {
document.title = to.meta.title || '默认标题'
next()
})使用状态管理维护标题
通过 Vuex 或 Pinia 集中管理标题状态，各组件通过状态管理库获取和更新标题。这种方法适合复杂应用中需要跨组件共享标题信息的场景。
// store.js
state: {
currentTitle: '初始标题'
},
mutations: {
setTitle(state, title) {
state.currentTitle = title
}
}<!-- Header.vue -->
<template>
<h1>{{ $store.state.currentTitle }}</h1>
</template>组件间通信传递标题
父组件通过 props 向子组件传递标题，或子组件通过事件向父组件请求更新标题。这种方法适合简单组件层级关系明确的场景。
<!-- Parent.vue -->
<template>
<child-component :title="pageTitle" @update-title="updateTitle" />
</template>响应式标题设计
结合 Vue 的响应式特性，使用计算属性动态生成标题。当依赖数据变化时，标题自动更新。
computed: {
pageTitle() {
return `${this.userName}的个人中心`
}
}每种方法适用于不同场景，可根据项目复杂度选择单独使用或组合使用。动态路由适合基础导航需求，状态管理适合大型应用，组件通信适合简单父子组件交互。
