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，建议为关键页面设置静态标题
• 移动端部分浏览器可能需要额外处理标题栏样式