• Head 管理

    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)。