vue-meta-info插件用法
插件介绍
vue-meta-info
是一个基于vue 2.0的插件,它会让你更好的管理你的app里面的meta
信息。
你可以直接在组件内设置metaInfo
便可以自动挂载到你的页面中。
如果你需要随着数据的变化,自动更新你的title
、meta
等信息,那么用此插件也是再合适不过了。 当然,有时候我们也可能会遇到让人头疼的SEO问题,那么使用此插件配合prerender-spa-plugin
也是再合适不过了。
安装
npm install vue-meta-info -S
引入vue-meta-info
比如全局引入,在main.js
中加入
import Vue from 'vue'
import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)
组件内静态使用metaInfo
<template>
...
</template>
<script>
export default {
metaInfo: {
title: 'My Example App', // set a title
meta: [{ // set meta
name: 'keyWords',
content: 'My Example App'
}]
link: [{ // set link
rel: 'asstes',
href: 'https://assets-cdn.github.com/'
}]
}
}
</script>
组件内动态创建metaInfo
如果你的title
或者meta
是异步加载的,那么你可能需要这样使用
<template>
...
</template>
<script>
export default {
name: 'async',
metaInfo () {
return {
title: this.pageName
}
},
data () {
return {
pageName: 'loading'
}
},
mounted () {
setTimeout(() => {
this.pageName = 'async'
}, 2000)
}
}
</script>