使用vue-meta-info实现Vue项目SEO

一、安装 vue-meta-info

npm i vue-meta-info --save

二、使用

在 main.js 文件中引入 vue-meta-info 并应用

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

1、组件内静态使用 metaInfo

<script>
export default {
  metaInfo: {
    title: 'My title', // set a title
    meta: [{                 // set meta
      name: 'keywords',
      content: 'My keywords'
    },
	{                  
      name: 'description',
      content: 'My description'
    }]
    link: [{                 // set link
      rel: 'asstes',
      href: 'https://assets.com/'
    }]
  }
}
</script>

2、组件内动态使用 metaInfo ：这种方式可以动态生成META标签的内容。

<template>
...
</template>

<script>
export default {
  name: 'async',
  metaInfo () {
    return {
      title: this.pageName
    }
  },
  data () {
    return {
      pageName: 'loading'
    }
  },
  mounted () {
    setTimeout(() => {
      this.pageName = 'async'
    }, 2000)
  }
}
</script>

作者：admin

TTF的家园-www.ttfde.top 个人博客以便写写东西，欢迎喜欢互联网的朋友一起交流!

TTF的家园 站点 QQ交谈