vue-meta讓你更優雅的管理頭部標籤

時間 2019-11-10

標籤 vue meta 讓你優雅管理頭部標籤欄目 HTML5 简体版

原文原文鏈接

在 Vue SPA 應用中，若是想要修改HTML的頭部標籤，或許，你會在代碼裏，直接這麼作:javascript

// 改下title
document.title = 'what?'
// 引入一段script
let s = document.createElement('script')
s.setAttribute('src', './vconsole.js')
document.head.appendChild(s)
// 修改meta信息，或者給html標籤添加屬性...
// 此處省略一大坨代碼...

今天給你們介紹一種更優雅的方式，去管理頭部標籤 vue-metahtml

vue-meta介紹

Manage page meta info in Vue 2.0 components. SSR + Streaming supported. Inspired by react-helmet.

借用 vue-meta github 上的介紹，基於Vue 2.0 的 vue-meta 插件，主要用於管理HMTL頭部標籤，同時也支持SSR。前端

vue-meta有如下特色：vue

在組件內設置 metaInfo，即可輕鬆實現頭部標籤的管理
metaInfo 的數據都是響應的，若是數據變化，頭部信息會自動更新
支持 SSR

如何使用

在介紹如何使用以前，先和你們普及一個最近很火的名詞 服務端渲染（SSR, Server Side Render），簡單來說，就是在訪問某個頁面時，服務端會把渲染好的頁面，直接返回給瀏覽器。java

咱們知道 vue-meta 是支持SSR的，下面的介紹分紅兩部分：react

Client 客戶端

在入口文件中，install vue-meta plugingit

import Vue from 'vue'
import VueRouter from 'vue-router'
import VueMeta from 'vue-meta'

Vue.use(VueRouter)
Vue.use(VueMeta)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

而後就能夠在組件中使用了github

export default {
  data () {
    return {
      myTitle: '標題'
    }
  },
  metaInfo: {
    title: this.myTitle,
    titleTemplate: '%s - by vue-meta',
    htmlAttrs: {
      lang: 'zh'
    },
    script: [{innerHTML: 'console.log("hello hello!")', type: 'text/javascript'}],
    __dangerouslyDisableSanitizers: ['script']
  },
  ...
}

能夠看一下頁面顯示vue-router

熟悉 Nuxt.js 的同窗，會發現配置 meta info 的 keyName 不一致。能夠經過下面的配置方法來修改：segmentfault

// vue-meta configuration  
Vue.use(Meta, {
  keyName: 'head', // the component option name that vue-meta looks for meta info on.
  attribute: 'data-n-head', // the attribute name vue-meta adds to the tags it observes
  ssrAttribute: 'data-n-head-ssr', // the attribute name that lets vue-meta know that meta info has already been server-rendered
  tagIDKeyName: 'hid' // the property name that vue-meta uses to determine whether to overwrite or append a tag
})

更加全面詳細的api，能夠參考 vue-meta github

Server 服務端

Step 1. 將 $meta 對象注入到上下文中

server-entry.js:

import app from './app'

const router = app.$router
const meta = app.$meta() // here

export default (context) => {
  router.push(context.url)
  context.meta = meta // and here
  return app
}

$meta 主要提供了，inject 和 refresh 方法。inject 方法，用在服務端，返回設置的metaInfo ；refresh 方法，用在客戶端，做用是更新meta信息。

Step 2. 使用 `inject()` 方法輸出頁面

server.js:

app.get('*', (req, res) => {
  const context = { url: req.url }
  renderer.renderToString(context, (error, html) => {
    if (error) return res.send(error.stack)
    const bodyOpt = { body: true }
    const {
      title, htmlAttrs, bodyAttrs, link, style, script, noscript, meta
    } = context.meta.inject()
    return res.send(`
      <!doctype html>
      <html data-vue-meta-server-rendered ${htmlAttrs.text()}>
        <head>
          ${meta.text()}
          ${title.text()}
          ${link.text()}
          ${style.text()}
          ${script.text()}
          ${noscript.text()}
        </head>
        <body ${bodyAttrs.text()}>
          ${html}
          <script src="/assets/vendor.bundle.js"></script>
          <script src="/assets/client.bundle.js"></script>
          ${script.text(bodyOpt)}
        </body>
      </html>
    `)
  })
})

源碼分析

前面說了 vue-meta 的使用方法，或許你們會想這些功能是怎麼實現的，那下面就和你們分享一下源碼。

怎麼區分 client 和 server渲染？

vue-meta 會在 beforeCreate() 鉤子函數中，將組件中設置的 metaInfo ，放在 this.$metaInfo 中。咱們能夠在其餘生命週期中，訪問 this.$metaInfo 下的屬性。

if (typeof this.$options[options.keyName] === 'function') {
  if (typeof this.$options.computed === 'undefined') {
    this.$options.computed = {}
  }
  this.$options.computed.$metaInfo = this.$options[options.keyName]
}

vue-meta 會在created等生命週期的鉤子函數中，監聽 $metaInfo 的變化，若是發生改變，就調用 $meta 下的 refresh 方法。這也是 metaInfo 作到響應的緣由。

created () {
  if (!this.$isServer && this.$metaInfo) {
    this.$watch('$metaInfo', () => {
      batchID = batchUpdate(batchID, () => this.$meta().refresh())
    })
  }
},

Server端，主要是暴露 $meta 下的 inject 方法，調用 inject 方法，會返回對應的信息。

client 和 server端是如何修改標籤的？

client端修改標籤，就是本文開頭提到的經過原生js，直接修改

return function updateTitle (title = document.title) {
  document.title = title
}

server端，就是經過 text方法，返回string格式的標籤

return function titleGenerator (type, data) {
  return {
    text () {
      return `<${type} ${attribute}="true">${data}</${type}>`
    }
  }
}

`__dangerouslyDisableSanitizers` 作了什麼？

vue-meta 默認會對特殊字符串進行轉義，若是設置了 __dangerouslyDisableSanitizers，就不會對再作轉義處理。

const escapeHTML = (str) => typeof window === 'undefined'
  // server-side escape sequence
  ? String(str)
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#x27;')
  // client-side escape sequence
  : String(str)
    .replace(/&/g, '\u0026')
    .replace(/</g, '\u003c')
    .replace(/>/g, '\u003e')
    .replace(/"/g, '\u0022')
    .replace(/'/g, '\u0027')