首頁 > 文章 > web前端 > 使用vue-meta如何管理頭部標籤

使用vue-meta如何管理頭部標籤

亚连原創: 2018-06-11 15:33:524410瀏覽

這篇文章主要介紹了詳解vue-meta如何讓你更優雅的管理頭部標籤，現在分享給大家，也給大家做個參考。

在Vue SPA 應用程式中，如果想要修改HTML的頭部標籤，或許，你會在程式碼裡，直接這麼做:

// 改下title
document.title = &#39;what?&#39;
// 引入一段script
let s = document.createElement(&#39;script&#39;)
s.setAttribute(&#39;src&#39;, &#39;./vconsole.js&#39;)
document.head.appendChild(s)
// 修改meta信息，或者给html标签添加属性...
// 此处省略一大坨代码...

今天給大家介紹一種更優雅的方式，去管理頭部標籤vue-meta

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有以下特點：

#在元件內設定metaInfo，可輕鬆實現頭部標籤的管理
metaInfo 的資料都是回應的，如果資料變化，頭部資訊會自動更新
支援SSR

如何使用

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

我們知道vue-meta 是支援SSR的，下面的介紹分成兩部分：

#Client 客戶端

在入口檔案中，install vue-meta plugin

import Vue from &#39;vue&#39;
import VueRouter from &#39;vue-router&#39;
import VueMeta from &#39;vue-meta&#39;

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

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

然後就可以在元件中使用了

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

可以看一下頁面顯示

##熟悉Nuxt.js的同學，會發現設定meta info 的keyName 不一致。可以透過下面的設定方法來修改：

// vue-meta configuration 
Vue.use(Meta, {
 keyName: &#39;head&#39;, // the component option name that vue-meta looks for meta info on.
 attribute: &#39;data-n-head&#39;, // the attribute name vue-meta adds to the tags it observes
 ssrAttribute: &#39;data-n-head-ssr&#39;, // the attribute name that lets vue-meta know that meta info has already been server-rendered
 tagIDKeyName: &#39;hid&#39; // 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 &#39;./app&#39;

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(&#39;*&#39;, (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] === &#39;function&#39;) {
 if (typeof this.$options.computed === &#39;undefined&#39;) {
  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(&#39;$metaInfo&#39;, () => {
   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 === &#39;undefined&#39;
 // server-side escape sequence
 ? String(str)
  .replace(/&/g, &#39;&&#39;)
  .replace(/</g, &#39;<&#39;)
  .replace(/>/g, &#39;>&#39;)
  .replace(/"/g, &#39;"&#39;)
  .replace(/&#39;/g, &#39;&#39;&#39;)
 // client-side escape sequence
 : String(str)
  .replace(/&/g, &#39;\u0026&#39;)
  .replace(/</g, &#39;\u003c&#39;)
  .replace(/>/g, &#39;\u003e&#39;)
  .replace(/"/g, &#39;\u0022&#39;)
  .replace(/&#39;/g, &#39;\u0027&#39;)

最後最開始接觸 vue-meta 是在 Nuxt.js 中。如果想了解 Nuxt.js，歡迎大家閱讀Nuxt.js實戰和 Nuxt.js踩坑分享。文中有任何表達不清或不當的地方，歡迎大家批評指正。

上面是我整理給大家的，希望今後對大家有幫助。相關文章：

在Vue中透過Element使用icon圖示

######使用Vue.set()如何實作資料動態回應# ###########在vue中如何實現動態綁定圖片以及data返回圖片路徑############在vue中如何實現動態改變靜態圖片以及請求網絡圖片############在vue中預先載入watch用法#############在Angular如何使用瀏覽器外掛程式Batarang########### #使用JS如何實現貼上板複製功能############JS中Number類型（詳細教學）######

以上是使用vue-meta如何管理頭部標籤的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html angular String 字符串 JS number 对象 this github

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：實戰項目中使用Vue內slots/scoped slots下一篇：實戰項目中使用Vue內slots/scoped slots

看更多