vue-meta-info 使用方法
1.安裝 vue-meta-info
npm i vue-meta-info --save
2.使用 在 main.js 檔案中引入 vue-meta-info
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
}]
link: [{ // set link
rel: 'asstes',
href: 'https://assets-cdn.github.com/'
}]
}
}
</script>
元件內動態使用 metaInfo ：這種方式可以動態生成META標籤的內容，一般META標 籤的內容需要根據變數去變化的時候，可以選用這種方式。
<script>
export default {
name: 'async',
metaInfo () {
return {
title: this.
}
},
data () {
return {
pageName: 'loading'
}
},
mounted () {
setTimeout(() => {
this.pageName = 'async'
}, 2000)
}
}
</script>