首页问答社区 web技术正文

在Vue SPA应用中修改HTML头部标签的方法

2021-02-22 07:36:37 175 0

这篇文章主要介绍在Vue SPA应用中修改HTML头部标签的方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

在 Vue SPA 应用中，如果想要修改HTML的头部标签，或许，你会在代码里，直接这么做:

//改下title
document.title='what?'
//引入一段script
lets=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有以下特点：

在组件内设置 metaInfo，便可轻松实现头部标签的管理
metaInfo 的数据都是响应的，如果数据变化，头部信息会自动更新
支持 SSR

如何使用

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

我们知道 vue-meta 是支持SSR的，下面的介绍分成两部分：

Client 客户端

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

importVuefrom'vue'
importVueRouterfrom'vue-router'
importVueMetafrom'vue-meta'

Vue.use(VueRouter)
Vue.use(VueMeta)

/*eslint-disableno-new*/
newVue({
el:'#app',
router,
template:'<App/>',
components:{App}
})

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

exportdefault{
data(){
return{
myTitle:'标题'
}
},
metaInfo:{
title:this.myTitle,
titleTemplate:'%s-byvue-meta',
htmlAttrs:{
lang:'zh'
},
script:[{innerHTML:'console.log("hellohello!")',type:'text/javascript'}],
__dangerouslyDisableSanitizers:['script']
},
...
}

可以看一下页面显示

熟悉 Nuxt.js 的同学，会发现配置 meta info 的 keyName 不一致。可以通过下面的配置方法来修改：

//vue-metaconfiguration
Vue.use(Meta,{
keyName:'head',//thecomponentoptionnamethatvue-metalooksformetainfoon.
attribute:'data-n-head',//theattributenamevue-metaaddstothetagsitobserves
ssrAttribute:'data-n-head-ssr',//theattributenamethatletsvue-metaknowthatmetainfohasalreadybeenserver-rendered
tagIDKeyName:'hid'//thepropertynamethatvue-metausestodeterminewhethertooverwriteorappendatag
})

更加全面详细的api，可以参考vue-meta github

Server 服务端

Step 1. 将 $meta 对象注入到上下文中

server-entry.js:

importappfrom'./app'

constrouter=app.$router
constmeta=app.$meta()//here

exportdefault(context)=>{
router.push(context.url)
context.meta=meta//andhere
returnapp
}

$meta 主要提供了，inject 和 refresh 方法。inject 方法，用在服务端，返回设置的metaInfo ；refresh 方法，用在客户端，作用是更新meta信息。

Step 2. 使用 inject() 方法输出页面

server.js:

app.get('*',(req,res)=>{
constcontext={url:req.url}
renderer.renderToString(context,(error,html)=>{
if(error)returnres.send(error.stack)
constbodyOpt={body:true}
const{
title,htmlAttrs,bodyAttrs,link,style,script,noscript,meta
}=context.meta.inject()
returnres.send(`
<!doctypehtml>
<htmldata-vue-meta-server-rendered${htmlAttrs.text()}>
<head>
${meta.text()}
${title.text()}
${link.text()}
${style.text()}
${script.text()}
${noscript.text()}
</head>
<body${bodyAttrs.text()}>
${html}
<scriptsrc="/assets/vendor.bundle.js"></script>
<scriptsrc="/assets/client.bundle.js"></script>
${script.text(bodyOpt)}
</body>
</html>
`)
})
})

源码分析

前面说了 vue-meta 的使用方法，或许大家会想这些功能是怎么实现的，那下面就和大家分享一下源码。

怎么区分 client 和 server渲染？

vue-meta 会在 beforeCreate() 钩子函数中，将组件中设置的 metaInfo ，放在 this.$metaInfo 中。我们可以在其他生命周期中，访问 this.$metaInfo 下的属性。

if(typeofthis.$options[options.keyName]==='function'){
if(typeofthis.$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，直接修改

returnfunctionupdateTitle(title=document.title){
document.title=title
}

server端，就是通过 text方法，返回string格式的标签

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

__dangerouslyDisableSanitizers 做了什么？

vue-meta 默认会对特殊字符串进行转义，如果设置了 __dangerouslyDisableSanitizers，就不会对再做转义处理。

constescapeHTML=(str)=>typeofwindow==='undefined'
//server-sideescapesequence
?String(str)
.replace(/&/g,'&amp;')
.replace(/</g,'&lt;')
.replace(/>/g,'&gt;')
.replace(/"/g,'&quot;')
.replace(/'/g,'&#x27;')
//client-sideescapesequence
: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踩坑分享。文中有任何表述不清或不当的地方，欢迎大家批评指正。

以上是“在Vue SPA应用中修改HTML头部标签的方法”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注恰卡编程网行业资讯频道！

vue