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


Posted in Javascript onJanuary 18, 2018

在 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-meta github 上的介绍,基于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']
 },
 ...
}

可以看一下页面显示

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

熟悉 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,可以参考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, '&')
  .replace(/</g, '<')
  .replace(/>/g, '>')
  .replace(/"/g, '"')
  .replace(/'/g, ''')
 // 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实战 和 Nuxt.js踩坑分享。文中有任何表述不清或不当的地方,欢迎大家批评指正。

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

Javascript 相关文章推荐
JavaScript 存在陷阱 删除某一区域所有节点
May 10 Javascript
javascript tips提示框组件实现代码
Nov 19 Javascript
由Javascript实现的页面日历
Nov 04 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
Oct 30 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
Dec 18 Javascript
JavaScript检测鼠标移动方向的方法
May 22 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
Nov 09 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
Jul 14 Javascript
jQuery 更改checkbox的状态,无效的解决方法
Jul 22 Javascript
javascript实现延时显示提示框效果
Jun 01 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
Dec 16 Javascript
Vue组件通信中非父子组件传值知识点总结
Dec 05 Javascript
Nuxt.js踩坑总结分享
Jan 18 #Javascript
Nuxt.js实战详解
Jan 18 #Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
Jan 18 #Javascript
ajax请求data遇到的问题分析
Jan 18 #Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
Jan 18 #Javascript
vue-scroller记录滚动位置的示例代码
Jan 17 #Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 #Javascript
You might like
神盾加密解密教程(一)PHP变量可用字符
2014/05/28 PHP
php计算给定时间之前的函数用法实例
2015/04/03 PHP
分享五个PHP7性能优化提升技巧
2015/12/07 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
javascript 动态数据下的锚点错位问题解决方法
2008/12/24 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
JS实现多物体缓冲运动实例代码
2013/11/29 Javascript
Jquery中CSS选择器用法分析
2015/02/10 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
2015/02/20 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
2016/06/25 Javascript
把普通对象转换成json格式的对象的简单实例
2016/07/04 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
jQuery设置Easyui校验规则(推荐)
2016/11/21 Javascript
原生js编写焦点图效果
2016/12/08 Javascript
详解vue与后端数据交互(ajax):vue-resource
2017/03/16 Javascript
Vue Router去掉url中默认的锚点#
2018/08/01 Javascript
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
从局部变量和全局变量开始全面解析Python中变量的作用域
2016/06/16 Python
python中kmeans聚类实现代码
2018/02/23 Python
Python中six模块基础用法
2019/12/08 Python
python异常处理try except过程解析
2020/02/03 Python
Python如何存储数据到json文件
2020/03/09 Python
pytorch 把图片数据转化成tensor的操作
2021/03/04 Python
加拿大便宜的隐形眼镜商店:Clearly
2016/09/15 全球购物
印度服装购物网站:Limeroad
2018/09/26 全球购物
租房合同协议书
2014/04/09 职场文书
煤矿安全演讲稿
2014/05/09 职场文书
中职生求职信
2014/07/01 职场文书
春节超市活动方案
2014/08/14 职场文书
暑期社会实践证明书
2014/11/17 职场文书
《多彩的民间艺术》教学反思
2016/02/16 职场文书
《悲惨世界》:比天空更广阔的是人的心灵
2020/01/16 职场文书
Vue自定义铃声提示音组件的实现
2022/01/22 Vue.js
Python下载商品数据并连接数据库且保存数据
2022/03/31 Python