利用vue-meta管理头部标签
在 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 github 上的介绍,基于Vue 2.0 的 vue-meta 插件,主要用于管理HMTL头部标签,同时也支持SSR。
vue-meta有以下特点:
1、在组件内设置 metaInfo,便可轻松实现头部标签的管理
2、metaInfo 的数据都是响应的,如果数据变化,头部信息会自动更新
3、支持 SSR
一、使用方法
安装:npm install vue-meta --save
引入:在main.js里引入
import VueMeta from 'vue-meta'
Vue.use(VueMeta)
然后就可以开始使用metaInfo了。在任何一个component中都可以定义 metaInfo 属性
<script>
export default {
name: 'App',
metaInfo: {
// 如果子component中没有定义 metaInfo.title ,会默认使用这个title
title: '首页',
titleTemplate: '%s | 我的Vuejs网站'
}
}
</script>
<script>
export default {
name: 'Home',
metaInfo: {
// 这里的 title 会替换 titleTemplate 中的字符占位
title: '这是一个首页',
// 这里定义titleTemplate会覆盖App.vue中的定义
titleTemplate: null
}
}
</script>
如果想定义其他meta信息,可以使用vue-meta的API。例如meta
{
metaInfo: {
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }
]
}
}
异步请求数据定义:如果component中使用了异步请求数据,可以使用 metaInfo()
方法。
metaInfo () {
return {
title: this.title,
meta: [
{ vmid: 'description', name: 'description', content: this.description }
]
}
},
其中,title,description都可以是异步获取的数据。
二、源码分析
1、怎么区分 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 方法,会返回对应的信息。
2、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}>`
}
}
}
3、__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.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core,如何
- vue-awesome-swiper组件不能自动播放和导航器小圆点不显示问题
- Vue - 实现获取手机验证码倒计时 60 秒(手机号+验证码登录功能)
- vue 父子组件属性传递
- vue 项目中使用scss
- vue 3.0 项目搭建移动端 (二) Vue-router: router-link 与 router-view keep-alive
- Echarts + vue + koa2实现数据同页面,切换全屏内容
- Vue项目 跨域 解决方案与 vue.config.js 配置解析
- vue-router实现SPA购物APP基本功能
- VUE-011-通过 v-if 和 v-for 实现特定值的列表循环匹配,并显示满足匹配条件的值
- Vue+Echarts监控大屏实例八:智慧社区监控模板实例
- vue学习笔记八:Jquery VS Vue之全局属性对照
- vue基础 Vue.extend
- 使用vue-cli3搭建一个项目!!!
- Vue-cli 4在vue.config.js中配置别名
- SpringBoot+Vue实现的在线聊天系统 附带详细运行指导视频
- 解决:Vue调试工具vue-devtools安装方法——解决下载速度缓慢,安装报错问题
- Vue中el、data、watch、computed的简写方法及watch与computed如何选择
- Vue学习第20天——Vue中常用的ajax请求库(axios与vue-rouserce)
- vue-解决Vue打包上线之后部分CSS不生效的问题
- ASP.NET MVC+Vue.js实现联系人管理