概述

使用基于vue2.0的seo插件vue-meta-info在vue3.x中的使用。

在基于vue3.x中，我们安装2.0的文档进行安装。

安装

 npm install vue-meta-info

引入

import Vue from 'vue'
import MetaInfo from 'vue-meta-info'
Vue.use(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>

异步

<template>
  ...
</template>
<script>
  export default {
    name: 'async',
    metaInfo () {
      return {
        title: this.pageName
      }
    },
    data () {
      return {
        pageName: 'loading'
      }
    },
    mounted () {
      setTimeout(() => {
        this.pageName = 'async'
      }, 2000)
    }
  }
</script>

问题

我们安装以后会发现我们切换页面，渲染seo的tdk,只在首次加载的时候成功了。但是我们在切换路由跳转页面的时候，发现浏览器的title没有发生改变（切换的title不要用查看源代码去看，源代码是渲染不出来页面的，所以我们使用f12功能查看dom结构），发现还是首次的title名称。
我们在进行页面的打印的时候，会发现当前页面没有渲染出来跟在vue2.0当中使用的变量$metaInfo，而在当前的页面我们可以打印出来第一次的$metaInfo,但是切换页面我们发现$metaInfo这个变量不存在。
我们查看了vue-meta-info的源代码，如下

/**
 * @author zmz
 * QQ:1028470211
 * Email:1028470211@qq.com
 */
import updateMetaInfo from '../metaOperate/updateMetaInfo'
import { VUE_META_KEY_NAME } from './constants'

let VueMetaInfo = () => {}

VueMetaInfo.install = function(Vue) {
    Vue.mixin({
        beforeCreate() {
            // 如果组件内设置了 vueMeta 信息
            if (this.$options[VUE_META_KEY_NAME] !== undefined) {
                let type = typeof this.$options[VUE_META_KEY_NAME]
                // 区分是否存在 vueMeta 信息
                this._hasMetaInfo = true
                // 判断组件内是否存在 computed 对象
                if (typeof this.$options.computed === 'undefined') {
                    this.$options.computed = {}
                }

                // 为组件添加 computed 对象并返回 vueMeta 信息
                this.$options.computed.$metaInfo = type === 'function' ?
                this.$options[VUE_META_KEY_NAME] : () => this.$options[VUE_META_KEY_NAME]
            }
        },
        beforeMount() {
            // 在组件挂载到 dom 之前更新 meta 信息
            if (this._hasMetaInfo) {
                updateMetaInfo(this.$metaInfo)
            }
        },
        mounted() {
            // dom 挂载之后 继续监听 meta 信息。如果发生变化，继续更新
            if (this._hasMetaInfo) {
                this.$watch('$metaInfo', () => {
                    updateMetaInfo(this.$metaInfo)
                })
            }
        },
        activated() {
            if (this._hasMetaInfo) {
                // keep-alive 组件激活时调用
                updateMetaInfo(this.$metaInfo)
            }
        },
        deactivated() {
            if (this._hasMetaInfo) {
                // keep-alive 组件停用时调用。
                updateMetaInfo(this.$metaInfo)
            }
        }
    })
}

export default VueMetaInfo

在源码中我们发现，这个$metaInfo变量是通过计算属性来填充的变量，代码

// 为组件添加 computed 对象并返回 vueMeta 信息
this.$options.computed.$metaInfo = type === 'function' ? this.$options[VUE_META_KEY_NAME] :
 () => this.$options[VUE_META_KEY_NAME]

动态创建了一个computed计算函数。
vue.mixin混入没有把computed创建函数$metaInfo填充到vue上面导致的，而后经过测试只需要在下面加上一个空的computed函数即可

computed: {
},

将上面放入vue.mixin混入当中即可正常使用。zmz-ui3已经支持对vue-meta-info的使用。