- 安装 vue-meta-info
npm i vue-meta-info --save
- 使用
在 main.js 文件中引入 vue-meta-infoimport MetaInfo from 'vue-meta-info';
组件内静态使用 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 :这种方式可以动态生成META标签的内容,一般META标签的内容需要根据变量去变化的时候,可以选用这种方式。
<template>
...
</template>
<script>
export default {
name: 'async',
metaInfo () {
return {
title: this.pageName
}
},
data () {
return {
pageName: 'loading'
}
},
mounted () {
setTimeout(() => {
this.pageName = 'async'
}, 2000)
}
}
</script>
作者:带刀打天下
链接:https://www.jianshu.com/p/50a8449a62c8
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。