vue如何利用vue meta info设置每个页面的title与meta信息

这篇文章主要介绍了vue如何利用vue meta info设置每个页面的title与meta信息，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

title: vue 使用 vue-meta-info 设置每个页面的 title 和 meta 信息 #文章页面上的显示名称，一般是中文

date: 2019-11-20 16:30:16 #文章生成时间，一般不改，当然也可以任意修改

categories: vue #分类

tags: [vue] #文章标签，可空，多标签请用格式，注意:后面有个空格

description: vue 使用 vue-meta-info 设置每个页面的 title 和 meta 信息

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

1.安装

npm install vue-meta-info --save

2.在main.js引入

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

3.在vue页面配置

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

如果您使用了Vue SSR 来渲染页面，那么您需要注意的是：

由于没有动态更新，所有的生命周期钩子函数中，只有 beforeCreate 和 created 会在服务器端渲染(SSR)过程中被调用。这就是说任何其他生命周期钩子函数中的代码（例如 beforeMount 或 mounted），只会在客户端执行。 此外还需要注意的是，你应该避免在 beforeCreate 和 created 生命周期时产生全局副作用的代码，例如在其中使用 setInterval 设置 timer。在纯客户端(client-side only)的代码中，我们可以设置一个 timer，然后在 beforeDestroy 或 destroyed 生命周期时将其销毁。但是，由于在 SSR 期间并不会调用销毁钩子函数，所以 timer 将永远保留下来。为了避免这种情况，请将副作用代码移动到 beforeMount 或 mounted 生命周期中。

基于以上约束，我们目前可以使用静态的数据来渲染我们的metaInfo，下面给出一个使用示例：

此时vueMetaInfo会帮我们在ssr的context中挂载出一个title变量和一个render对象。类似于这样：

context = {  ...  title: 'My Example App',  render: {    meta: function () { ... },    link: function () { ... }  }}

至此，我们可以改造我们的模板：

              {{{render.meta && render.meta()}}}    {{{render.link && render.link()}}}          

这样便可以渲染出需要的数据。值得注意的是：虽然我们可以使用

注意：

这种形式来定义数据，但是最终渲染出来的title 依然是 loading，因为服务端渲染除了created和 beforeCreate并没有mounted钩子。

感谢你能够认真阅读完这篇文章，希望小编分享的"vue如何利用vue meta info设置每个页面的title与meta信息"这篇文章对大家有帮助，同时也希望大家多多支持，关注行业资讯频道，更多相关知识等着你来学习!