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

2021-09-14 02:50:29 字數 3315 閱讀 9939

在 vue spa 應用中，如果想要修改html的頭部標籤，或許，你會在**裡，直接這麼做:

// 改下title


document.title = 'what?'


// 引入一段script


let s = document.createelement('script')


s.setattribute('src', './vconsole.js')


// 修改meta資訊，或者給html標籤新增屬性...


// 此處省略一大坨**...
今天給大家介紹一種更優雅的方式，去管理頭部標籤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有以下特點：

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

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

在入口檔案中，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()
然後就可以在元件中使用了

export default 


},metainfo: ,


script: ,


__dangerouslydisablesanitizers: ['script']


},...


}
可以看一下頁面顯示

熟悉 nuxt.js 的同學，會發現配置 meta info 的 keyname 不一致。可以通過下面的配置方法來修改：

// vue-meta configuration  


vue.use(meta, )
更加全面詳細的api，可以參考 vue-meta github

server-entry.js:

export default (context) =>

$meta主要提供了，inject和refresh方法。inject方法，用在服務端，返回設定的metainfo ；refresh方法，用在客戶端，作用是更新meta資訊。

server.js:

const context =

renderer.rendertostring(context, (error, html) =>

const = context.meta.inject()

return res.send(`

$$`)

})})

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

vue-meta 會在beforecreate()鉤子函式中，將元件中設定的 metainfo ，放在 this.$metainfo 中。我們可以在其他生命週期中，訪問 this.$metainfo 下的屬性。

if (typeof this.$options[options.keyname] === 'function') 


} this.$options.computed.$metainfo = this.$options[options.keyname]


}
vue-meta 會在created等生命週期的鉤子函式中，監聽$metainfo的變化，如果發生改變，就呼叫$meta下的refresh方法。這也是metainfo做到響應的原因。

created () )


}},
server端，主要是暴露$meta下的inject方法，呼叫inject方法，會返回對應的資訊。

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

return function updatetitle (title = document.title)
server端，就是通過 text方法，返回string格式的標籤

return function titlegenerator (type, data)  $="true">$`}}}
vue-meta 缺省會對特殊字串進行轉義，如果設定了__dangerouslydisablesanitizers，就不會對再做轉義處理。

const escapehtml = (str) => typeof window === 'undefined'


// server-side escape sequence


? string(str)


.replace(/&/g, '&')


.replace(//g, '>')


.replace(/"/g, '"')


.replace(/'/g, ''')


// client-side escape sequence


: string(str)


.replace(/&/g, '\u0026')


.replace(//g, '\u003e')


.replace(/"/g, '\u0022')


.replace(/'/g, '\u0027')

Lombok讓pojo變得更優雅

lombok採取註解的形式，標記在pojo上面，在編譯後，自動生成相應的方法，像get set 構造方法等都可以註解一鍵生成。1 dependency 2 groupid org.projectlombok groupid 3 artifactid lombok artifactid 4 versi...

更優雅的 kill 程序

使用 unix 的時候常常需要 kill 乙個程序，而我們又常常記不住程序的 pid，所有一般首先使用 ps 命令來列印系統中的程序，然後對 ps 得到的資料以程序名進行過濾，提取出相對應的 pid，以該 pid 為引數呼叫 kill 就完成了整個的任務。乙個基礎的示例如下 查詢程序 longyu ...

如何讓你的PCB設計更優秀

pcb layout 原理圖 eda 往往是pcb設計工程師不願意去碰的東西。也許有人會說，即使我 了，實際製作出來的pcb和 結果還是會有區別，那我還去浪費時間做 幹嘛?我不 做出來的板子不是一樣工作的好好的?對這種想法很無奈。一兩次設計沒有問題，不代表以後不會出問題。雖然 結果和實際結果有差異，...