欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

在VueSPA應(yīng)用中修改HTML頭部標(biāo)簽的方法

這篇文章主要介紹在Vue SPA應(yīng)用中修改HTML頭部標(biāo)簽的方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比江海網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式江海網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋江海地區(qū)。費(fèi)用合理售后完善，10余年實(shí)體公司更值得信賴。

在 Vue SPA 應(yīng)用中，如果想要修改HTML的頭部標(biāo)簽，或許，你會(huì)在代碼里，直接這么做:

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

今天給大家介紹一種更優(yōu)雅的方式，去管理頭部標(biāo)簽 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頭部標(biāo)簽，同時(shí)也支持SSR。

vue-meta有以下特點(diǎn)：

  1. 在組件內(nèi)設(shè)置 metaInfo，便可輕松實(shí)現(xiàn)頭部標(biāo)簽的管理

  2. metaInfo 的數(shù)據(jù)都是響應(yīng)的，如果數(shù)據(jù)變化，頭部信息會(huì)自動(dòng)更新

  3. 支持 SSR

如何使用

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

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

Client 客戶端

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

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

然后就可以在組件中使用了

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

可以看一下頁面顯示

在Vue SPA應(yīng)用中修改HTML頭部標(biāo)簽的方法

熟悉 Nuxt.js 的同學(xué)，會(huì)發(fā)現(xiàn)配置 meta info 的 keyName 不一致。可以通過下面的配置方法來修改：

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

更加全面詳細(xì)的api，可以參考vue-meta github

Server 服務(wù)端

Step 1. 將 $meta 對(duì)象注入到上下文中

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 方法，用在服務(wù)端，返回設(shè)置的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 的使用方法，或許大家會(huì)想這些功能是怎么實(shí)現(xiàn)的，那下面就和大家分享一下源碼。

怎么區(qū)分 client 和 server渲染？

vue-meta 會(huì)在 beforeCreate() 鉤子函數(shù)中，將組件中設(shè)置的 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 會(huì)在created等生命周期的鉤子函數(shù)中，監(jiān)聽 $metaInfo 的變化，如果發(fā)生改變，就調(diào)用 $meta 下的 refresh 方法。這也是 metaInfo 做到響應(yīng)的原因。

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

Server端，主要是暴露 $meta 下的 inject 方法，調(diào)用 inject 方法，會(huì)返回對(duì)應(yīng)的信息。

client 和 server端 是如何修改標(biāo)簽的？

client端 修改標(biāo)簽，就是本文開頭提到的 通過原生js，直接修改

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

server端，就是通過 text方法，返回string格式的標(biāo)簽

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

__dangerouslyDisableSanitizers 做了什么？

vue-meta 默認(rèn)會(huì)對(duì)特殊字符串進(jìn)行轉(zhuǎn)義，如果設(shè)置了 __dangerouslyDisableSanitizers，就不會(huì)對(duì)再做轉(zhuǎn)義處理。

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

最后

最開始接觸 vue-meta 是在 Nuxt.js 中。如果想了解 Nuxt.js，歡迎大家閱讀Nuxt.js實(shí)戰(zhàn) 和 Nuxt.js踩坑分享。文中有任何表述不清或不當(dāng)?shù)牡胤剑瑲g迎大家批評(píng)指正。

以上是“在Vue SPA應(yīng)用中修改HTML頭部標(biāo)簽的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前文章：在VueSPA應(yīng)用中修改HTML頭部標(biāo)簽的方法
網(wǎng)頁路徑：http://chinadenli.net/article48/gogshp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、外貿(mào)建站、網(wǎng)站設(shè)計(jì)、面包屑導(dǎo)航、商城網(wǎng)站、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

商城網(wǎng)站建設(shè)