metainfo可以设置说明_vue 中使用 vue-meta-info

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()}}}