ヘッドの管理

アセットの挿入と同様に、ヘッド (Head) の管理も同じ考えに追従しています。つまり、コンポーネントのライフサイクルの描画 context に動的にデータを付随させ、そして template 内にデータを展開 (interpolate) できるという考えです。

バージョン >=2.3.2 では、this.$ssrContext としてコンポーネントにおいて SSR コンテキストに直接アクセスできます。古いバージョンでは、createApp() によって手動で SSR コンテキストを渡して注入し、ルート (root) インスタンスの $options に公開する必要があります。子は、this.$root.$options.ssrContext を介してそれにアクセスすることができます。

タイトルを管理する単純な mixin を書くことができます:

// title-mixin.js

function getTitle (vm) {
  // コンポーネントはシンプルに `title` オプションを提供し、
  // これには文字列または関数を入れることができます
  const { title } = vm.$options
  if (title) {
    return typeof title === 'function'
      ? title.call(vm)
      : title
  }
}

const serverTitleMixin = {
  created () {
    const title = getTitle(this)
    if (title) {
      this.$root.$options.ssrContext.title = title
    }
  }
}

const clientTitleMixin = {
  mounted () {
    const title = getTitle(this)
    if (title) {
      document.title = title
    }
  }
}

// VUE_ENV は webpack.DefinePlugin を使って注入できます
export default process.env.VUE_ENV === 'server'
  ? serverTitleMixin
  : clientTitleMixin

このようにすれば、ルート (route) コンポーネントはドキュメントのタイトルを制御するために context を利用することができます。

// Item.vue
export default {
  mixins: [titleMixin],
  title () {
    return this.item.title
  },

  asyncData ({ store, route }) {
    return store.dispatch('fetchItem', route.params.id)
  },

  computed: {
    item () {
      return this.$store.state.items[this.$route.params.id]
    }
  }
}

そしてタイトルは template 内でバンドルレンダラに渡されます:

<html>
  <head>
    <title>{{ title }}</title>
  </head>
  <body>
    ...
  </body>
</html>

メモ:

XSS 攻撃を防ぐために double-mustache（HTML エスケープした展開）を使うこと。
描画中にタイトルをセットするコンポーネントがない場合に備えて、context オブジェクトを作成する際にはデフォルトのタイトルをセットするようにすべきです。

同様のやり方で、この mixin を包括的にヘッドを管理するユーティリティに容易に拡張できます。

← CSS の管理キャッシュ →

# ヘッドの管理

ヘッドの管理