详解vue-meta如何让你更优雅的管理头部标签
|
在 Vue SPA 应用中，如果想要修改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有以下特点：
如何使用在介绍如何使用之前，先和大家普及一个最近很火的名词 服务端渲染（SSR,Server Side Render），简单来讲，就是在访问某个页面时，服务端会把渲染好的页面，直接返回给浏览器。 我们知道 vue-meta 是支持SSR的，下面的介绍分成两部分： Client 客户端在入口文件中，install vue-meta plugin Vue.use(VueRouter)
Vue.use(VueMeta) / eslint-disable no-new / 然后就可以在组件中使用了 可以看一下页面显示
熟悉 Nuxt.js 的同学，会发现配置 meta info 的 keyName 不一致。可以通过下面的配置方法来修改： 更加全面详细的api，可以参考vue-meta github Server 服务端Step 1. 将 $meta 对象注入到上下文中server-entry.js: const router = app.$router
const meta = app.$meta() // here export default (context) => { $meta 主要提供了，inject 和 refresh 方法。inject 方法，用在服务端，返回设置的metaInfo ；refresh 方法，用在客户端，作用是更新meta信息。 Step 2. 使用 inject() 方法 输出页面server.js: {
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(`
${meta.text()}
${title.text()}
${link.text()}
${style.text()}
${script.text()}
${noscript.text()}
${html}
${script.text(bodyOpt)}
`)
})
})
源码分析前面说了 vue-meta 的使用方法，或许大家会想这些功能是怎么实现的，那下面就和大家分享一下源码。 怎么区分 client 和 server渲染？vue-meta 会在 beforeCreate() 钩子函数中，将组件中设置的 metaInfo ，放在 this.$metaInfo 中。我们可以在其他生命周期中，访问 this.$metaInfo 下的属性。 vue-meta 会在created等生命周期的钩子函数中，监听 $metaInfo 的变化，如果发生改变，就调用 $meta 下的 refresh 方法。这也是 metaInfo 做到响应的原因。 {
batchID = batchUpdate(batchID,() => this.$meta().refresh())
})
}
},
Server端，主要是暴露 $meta 下的 inject 方法，调用 inject 方法，会返回对应的信息。 client 和 server端 是如何修改标签的？client端 修改标签，就是本文开头提到的 通过原生js，直接修改 server端，就是通过 text方法，返回string格式的标签 `
}
}
}
__dangerouslyDisableSanitizers 做了什么？vue-meta 默认会对特殊字符串进行转义，如果设置了 __dangerouslyDisableSanitizers，就不会对再做转义处理。 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')
最后 最开始接触 vue-meta 是在 Nuxt.js 中。如果想了解 Nuxt.js，欢迎大家阅读 和 分享。文中有任何表述不清或不当的地方，欢迎大家批评指正。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
