在线视频鲁鲁,一级做a爰片久久毛片A片老女人,jizz大全日本护士喷奶水

類似于資源注入，Head 管理遵循相同的理念：我們可以在組件的生命周期中，將數(shù)據(jù)動態(tài)地追加到渲染上下文 (render context)，然后在模板中的占位符替換為這些數(shù)據(jù)。

在 2.3.2+ 的版本，你可以通過 this.$ssrContext 來直接訪問組件中的服務器端渲染上下文(SSR context)。在舊版本中，你必須通過將其傳遞給 createApp() 并將其暴露于根實例的 $options 上，才能手動注入服務器端渲染上下文(SSR context) - 然后子組件可以通過 this.$root.$options.ssrContext 來訪問它。

我們可以編寫一個簡單的 mixin 來完成標題管理：

// title-mixin.js


function getTitle (vm) {
  // 組件可以提供一個 `title` 選項
  // 此選項可以是一個字符串或函數(shù)
  const { title } = vm.$options
  if (title) {
    return typeof title === 'function'
      ? title.call(vm)
      : title
  }
}


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


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


// 可以通過 `webpack.DefinePlugin` 注入 `VUE_ENV`
export default process.env.VUE_ENV === 'server'
  ? serverTitleMixin
  : clientTitleMixin

現(xiàn)在，路由組件可以利用以上 mixin，來控制文檔標題 (document title)：

// 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]
    }
  }
}

然后模板中的內(nèi)容將會傳遞給 bundle renderer：

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

注意：

使用雙花括號(double-mustache)進行 HTML 轉(zhuǎn)義插值(HTML-escaped interpolation)，以避免 XSS 攻擊。

你應該在創(chuàng)建 context 對象時提供一個默認標題，以防在渲染過程中組件沒有設(shè)置標題。

使用相同的策略，你可以輕松地將此 mixin 擴展為通用的頭部管理工具 (generic head management utility)。

Vue.js SSR Head 管理

推薦文章

推薦教程

推薦課程