vue获取title的方法

在Vue开发中，获取页面标题（title）是一个常见的需求。无论是根据不同的页面内容动态设置标题，还是在特定的业务逻辑中获取当前页面的标题信息，都需要掌握合适的方法。下面将介绍几种在Vue中获取title的有效方法。

一、通过document对象获取

在Vue组件中，可以直接使用JavaScript的 document 对象来获取当前页面的标题。例如，在 mounted 生命周期钩子函数中，可以这样获取：

<template>
  <div>
    <h1>{{ pageTitle }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageTitle: ''
    };
  },
  mounted() {
    this.pageTitle = document.title;
  }
};
</script>

这种方法简单直接，但它获取的是页面加载时的初始标题，如果后续标题发生了变化，需要重新获取。

二、使用Vue Router的导航守卫

如果项目中使用了Vue Router进行路由管理，可以利用导航守卫来动态设置和获取标题。在路由配置文件中，可以为每个路由定义一个 meta 字段，用于存储该路由对应的标题信息。然后在全局导航守卫 beforeEach 中，根据当前路由的 meta 信息来设置页面标题：

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home,
      meta: { title: '首页' }
    }
  ]
});

router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title;
  }
  next();
});

三、使用Vuex进行状态管理

如果项目中使用了Vuex，可以将页面标题作为一个状态存储在Vuex的 store 中。在需要获取或设置标题的组件中，通过 mapState 和 mapMutations 辅助函数来操作标题状态。

根据项目的具体需求和架构，选择合适的方法来获取和设置Vue项目中的页面标题，能够提升用户体验和项目的可维护性。