在 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都可以是异步获取的数据。