在vue spa应用中修改html头部标签的方法-mile米乐体育
这篇文章主要介绍在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:'', 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(` ${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 下的属性。
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}` } } }__dangerouslydisablesanitizers 做了什么？
vue-meta 默认会对特殊字符串进行转义，如果设置了 __dangerouslydisablesanitizers，就不会对再做转义处理。
constescapehtml=(str)=>typeofwindow==='undefined' //server-sideescapesequence ?string(str) .replace(/&/g,'&') .replace(//g,'>') .replace(/"/g,'"') .replace(/'/g,''') //client-sideescapesequence :string(str) .replace(/&/g,'\u0026') .replace(//g,'\u003e') .replace(/"/g,'\u0022') .replace(/'/g,'\u0027')
最后
最开始接触 vue-meta 是在 nuxt.js 中。如果想了解 nuxt.js，欢迎大家阅读nuxt.js实战 和 nuxt.js踩坑分享。文中有任何表述不清或不当的地方，欢迎大家批评指正。
以上是“在vue spa应用中修改html头部标签的方法”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注恰卡编程网行业资讯频道！