vue实现标题
Vue 实现动态标题的方法
在 Vue 应用中，可以通过以下几种方式动态设置页面标题，适用于单页应用（SPA）或多页场景。
使用 document.title 直接修改
在 Vue 组件生命周期钩子中直接修改 document.title：
export default {
mounted() {
document.title = '自定义标题';
}
}结合路由动态设置
通过 Vue Router 的导航守卫全局设置标题，需在路由配置中添加 meta 字段：
// router.js
const routes = [
{
path: '/home',
component: Home,
meta: { title: '首页' }
}
];
router.beforeEach((to, from, next) => {
if (to.meta.title) {
document.title = to.meta.title;
}
next();
});使用 vue-meta 插件
安装插件后，在组件中通过 metaInfo 属性管理标题：
// main.js
import VueMeta from 'vue-meta';
Vue.use(VueMeta);
// 组件内
export default {
metaInfo: {
title: '产品详情页',
titleTemplate: '%s | 公司名称' // 可选标题模板
}
}响应式数据绑定
结合 Vue 的响应式特性，通过计算属性动态更新标题：
export default {
data() {
return { productName: '手机' };
},
computed: {
pageTitle() {
return `${this.productName}详情`;
}
},
watch: {
pageTitle(newVal) {
document.title = newVal;
}
}
}注意事项
- 在服务端渲染（SSR）场景中需使用
vue-meta等专门解决方案 - 动态标题可能影响 SEO，建议为关键页面设置静态标题
- 移动端部分浏览器可能需要额外处理标题栏样式
