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页面配置

<template>
  ...
</template>
 
<script>
  export default {
    metainfo: {
      title: 'my example app', // set a title
      meta: [   // set meta
      	{                
        	name: 'keywords',
        	content: 'my example app'
      	},
      	{
        	name: 'description',
        	content: '这是一段网页的描述'
   		 }
      ]
      link: [{                 // set link
       		rel: 'asstes',
        	href: 'https://assets-cdn.github.com/'
      }]
    }
  }
</script>

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

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

如果您使用了vue ssr 来渲染页面,那么您需要注意的是:

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

基于以上约束,我们目前可以使用静态的数据来渲染我们的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> 

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

context = {
  ...
  title: 'my example app',
  render: {
    meta: function () { ... },
    link: function () { ... }
  }
}

至此,我们可以改造我们的模板:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{title}}</title>
    {{{render.meta && render.meta()}}}
    {{{render.link && render.link()}}}
  </head>
  <body>
    <!--vue-ssr-outlet-->
  </body>
</html>

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

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

注意:

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

总结

到此这篇关于vue利用vue meta info设置每个页面的title与meta信息的文章就介绍到这了,更多相关vue设置页面title与meta信息内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com!