如何在 Nuxt 中动态标题

在 Nuxt 中，可以通过配置文档和组件的方式来设置页面标题。有时候，我们需要根据页面内容动态地设置页面标题。本篇文章将介绍如何在 Nuxt 中实现动态标题。

方法一：使用 head 方法

在 Vue 组件中，可以通过定义 head 方法来设置页面标题。在 Nuxt 中，该方法同样适用。

export default {
  head() {
    return {
      title: '动态标题'
    }
  }
}

以上示例中，我们直接在 head 方法中返回了一个对象，对象的 title 属性设置为了 "动态标题"。这样，在访问该页面时，页面的标题将会变为 "动态标题"。

需要注意的是，上述示例中的 head 方法仅适用于单个页面。如果多个页面都需要设置同样的动态标题，我们需要将 head 方法抽取到一个混入对象中，然后在需要设置动态标题的组件中导入该混入对象。

方法二：使用模板字符串

除了使用 head 方法外，我们还可以通过使用模板字符串来设置页面标题。在模板字符串中，我们可以使用 Vue 变量插值语法，将页面内容嵌入动态标题中。

export default {
  computed: {
    pageTitle() {
      return `动态标题 - ${this.article.title}`
    }
  },
  head() {
    return {
      titleTemplate: '%s - My Blog',
      title: this.pageTitle
    }
  }
}

以上示例中，我们先定义了一个计算属性 pageTitle，计算属性返回了一个字符串，其中的 this.article.title 表示文章标题。然后，在 head 方法中，我们将 titleTemplate 设置为 '%s - My Blog'，表示所有页面的标题都需要添加一个 "My Blog" 后缀。最后，将 title 属性设置为 this.pageTitle 即可将动态标题应用到页面中。

以上两种方法都可以实现在 Nuxt 中设置动态标题的功能。开发者可以根据需求和习惯进行选择。