Head 管理

类似于资源注入，Head 管理遵循相同的理念：我们可以在组件的生命周期中，将数据动态地追加到渲染上下文 (render context)，然后在模板中的占位符替换为这些数据。

在 2.3.2+ 的版本，你可以通过 this.$ssrContext 来直接访问组件中的服务器端渲染上下文(SSR context)。在旧版本中，你必须通过将其传递给 createApp() 并将其暴露于根实例的 $options 上，才能手动注入服务器端渲染上下文(SSR context) - 然后子组件可以通过 this.$root.$options.ssrContext 来访问它。

我们可以编写一个简单的 mixin 来完成标题管理：

  1. // title-mixin.js
  3. function getTitle (vm) {
  4.   // 组件可以提供一个 `title` 选项
  5.   // 此选项可以是一个字符串或函数
  6.   const { title } = vm.$options
  7.   if (title) {
  8.     return typeof title === 'function'
  9.       ? title.call(vm)
  10.       : title
  11.   }
  12. }
  14. const serverTitleMixin = {
  15.   created () {
  16.     const title = getTitle(this)
  17.     if (title) {
  18.       this.$ssrContext.title = title
  19.     }
  20.   }
  21. }
  23. const clientTitleMixin = {
  24.   mounted () {
  25.     const title = getTitle(this)
  26.     if (title) {
  27.       document.title = title
  28.     }
  29.   }
  30. }
  32. // 可以通过 `webpack.DefinePlugin` 注入 `VUE_ENV`
  33. export default process.env.VUE_ENV === 'server'
  34.   ? serverTitleMixin
  35.   : clientTitleMixin

现在，路由组件可以利用以上 mixin，来控制文档标题 (document title)：

  1. // Item.vue
  2. export default {
  3.   mixins: [titleMixin],
  4.   title () {
  5.     return this.item.title
  6.   },
  8.   asyncData ({ store, route }) {
  9.     return store.dispatch('fetchItem', route.params.id)
  10.   },
  12.   computed: {
  13.     item () {
  14.       return this.$store.state.items[this.$route.params.id]
  15.     }
  16.   }
  17. }

然后模板中的内容将会传递给 bundle renderer：

  1. <html>
  2.   <head>
  3.     <title>{{ title }}</title>
  4.   </head>
  5.   <body>
  6.     ...
  7.   </body>
  8. </html>

注意：

  • 使用双花括号(double-mustache)进行 HTML 转义插值(HTML-escaped interpolation)，以避免 XSS 攻击。

  • 你应该在创建 context 对象时提供一个默认标题，以防在渲染过程中组件没有设置标题。

使用相同的策略，你可以轻松地将此 mixin 扩展为通用的头部管理工具 (generic head management utility)。