nuxt分享页面

AsyncData

• 必须是页面级组件才能使用 asyncData
• 在页面渲染前请求数据
• 利用head对meta进行修改

meta

meta 渲染出来的位置必须在上层，不让会导致分享时无法获取meta

设置分享相关

{
        title: title,
        meta: [
          {
            property: 'og:url',
            content: url
          },
          {
            hid: 'description',
            name: 'description',
            content: description
          },
          {
            property: 'og:type',
            content: 'website'
          },
          {
            property: 'og:title',
            content: title
          },
          {
            property: 'og:description',
            content: description
          },
          {
            property: 'og:image',
            content: logo
          },
          {
            property: 'og:type',
            content: 'website'
          }
        ]
      }

分享页面

meta标签的 og:url 必须是当前被分享的页面地址

分享至facebook

<a :href="`https://www.facebook.com/sharer/sharer.php?u=${fullPath}&quote=${copywriting}`" target="_blank"></a>

u: 分享地址
quote: 建议文案

分享至twitter

<a :href="`https://twitter.com/share?text=${copywriting}&url=${fullPath}`" target="_blank"></a>

url: 分享地址
text: 内容 （可以多个）

分享至whatsapp

<a :href="`https://api.whatsapp.com/send/?text=${copywriting}+${fullPath}`" target="_blank">

text: 分享内容