用户登录
用户注册

分享至

详解vue-meta如何让你更优雅的管理头部标签

  • 作者: 郎个里个浪
  • 来源: 51数据库
  • 2022-06-16

在 vue spa 应用中,如果想要修改html的头部标签,或许,你会在代码里,直接这么做:

// 改下title
document.title = 'what?'
// 引入一段script
let s = document.createelement('script')
s.setattribute('src', './vconsole.js')
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 2.0 的 vue-meta 插件,主要用于管理hmtl头部标签,同时也支持ssr。

vue-meta有以下特点:

  1. 在组件内设置 metainfo,便可轻松实现头部标签的管理
  2. metainfo 的数据都是响应的,如果数据变化,头部信息会自动更新
  3. 支持 ssr

如何使用

在介绍如何使用之前,先和大家普及一个最近很火的名词 服务端渲染(ssr, server side render),简单来讲,就是在访问某个页面时,服务端会把渲染好的页面,直接返回给浏览器。

我们知道 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: '标题'
  }
 },
 metainfo: {
  title: this.mytitle,
  titletemplate: '%s - by vue-meta',
  htmlattrs: {
   lang: 'zh'
  },
  script: [{innerhtml: 'console.log("hello hello!")', type: 'text/javascript'}],
  __dangerouslydisablesanitizers: ['script']
 },
 ...
}

可以看一下页面显示

熟悉 nuxt.js 的同学,会发现配置 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
})

更加全面详细的api,可以参考

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, '&')
  .replace(/</g, '<')
  .replace(/>/g, '>')
  .replace(/"/g, '"')
  .replace(/'/g, ''')
 // client-side escape sequence
 : string(str)
  .replace(/&/g, '&')
  .replace(/</g, '<') .replace(/>/g,="" '="">')
  .replace(/"/g, '"')
  .replace(/'/g, ''')

最后

最开始接触 vue-meta 是在 nuxt.js 中。如果想了解 nuxt.js,欢迎大家阅读nuxt.js实战 和 nuxt.js踩坑分享。文中有任何表述不清或不当的地方,欢迎大家批评指正。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

软件
前端设计
程序设计
Java相关