vue seo管理 vue-meta-info 动态设置meta和title

使用 vue-meta-info 配置title和meta按照以下步骤

1.安装

yarn add vue-meta-info

npm:

npm install vue-meta-info --save

2.在main.js全局引入 vue-meta-info

import MetaInfo from 'vue-meta-info'Vue.use(MetaInfo)

3.组件内静态使用 metaInfo

<script>export default {metaInfo: {title: '页面title', //设置页面titlemeta: [{//设置页面metaname: 'keyWords',content: '关键词'},{name: "description",content: "描述",},]}}</script>

4.如果你的 title 或者 meta 是异步加载的，那么你可能需要这样使用

<script>export default {metaInfo() {return {title: this.PageTitle,meta: [{name: "keyWords",content: this.PagekeyWords,},{name: "description",content: this.PageDescription,},],};},data () {return {PageTitle: "",PagekeyWords: "",PageDescription: "",}},mounted (){setTimeout(() => {this.PageTitle = '页面title'this.PagekeyWords = '页面关键词'this.PageDescription = '页面描述'},2000)}}</script>

如果需要更好的处理 Vue 单页面SEO,可以和 prerender-spa-plugin形成更优的配合,请看我另一篇文章哦