使用基于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的使用。
本文地址:https://www.zhuimengzhu.com/details/460.html
转载地址:暂无
转载说明:转载时请在文首注明来源zhuimengzhu.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。zhuimengzhu 保留追究相应责任的权利。