1,安装vue-meta-info
npm i vue-meta-info --save
2,在main.js文件中引入vue-meta-info
import Vue from 'vue'
import MetaInfo from 'vue-meta-info';
Vue.use(MetaInfo)
3,静态使用 metaInfo
...
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/'
}]
}
}
3,动态使用 metaInfo
...
export default {
name: 'async',
metaInfo () {
return {
title: this.pageName
}
},
data () {
return {
pageName: 'loading'
}
},
mounted () {
setTimeout(() => {
this.pageName = 'async'
}, 2000)
}
}
4,如果您使用了Vue SSR 来渲染页面,那么您需要注意的是:
由于没有动态更新,所有的生命周期钩子函数中,只有 beforeCreate 和 created 会在服务器端渲染(SSR)过程中被调用。
这就是说任何其他生命周期钩子函数中的代码(例如 beforeMount 或 mounted),只会在客户端执行。
此外还需要注意的是,你应该避免在 beforeCreate 和 created 生命周期时产生全局副作用的代码,
例如在其中使用 setInterval 设置 timer。在纯客户端(client-side only)的代码中,我们可以设置一个 timer,然后在 beforeDestroy 或 destroyed 生命周期时将其销毁。
但是,由于在 SSR 期间并不会调用销毁钩子函数,所以 timer 将永远保留下来。为了避免这种情况,请将副作用代码移动到 beforeMount 或 mounted 生命周期中。
5,基于以上约束,我们目前可以使用静态的数据来渲染我们的metaInfo,下面给出一个使用示例:
...
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/'
}]
}
}
此时vueMetaInfo会帮我们在ssr的context中挂载出一个title变量和一个render对象。类似于这样
context = {
...
title: 'My Example App',
render: {
meta: function () { ... },
link: function () { ... }
}
}
至此,我们可以改造我们的模板:
{{title}}{{{render.meta && render.meta()}}}
{{{render.link && render.link()}}}