Vue3 路由器元标签

Question

我一直在开发一个 Vue3 网站，需要 SEO 才能正常工作。我没有使用 Nuxt，并且已设置为 Vue3，无法移回 Vue2。需要找到一种方法来为我的网站添加动态元数据。我确实尝试安装meta3-vue、meta-vue、meta-3-vue、meta-vue@next 和大约 5 个其他 SEO 元生成库，但都不起作用。每个要么坏了，要么他们有一些我无法满足的要求。

如何使元标记在本机路由器中动态？

Answer 1

我最终编写了自己的元标记解决方案。

index.js（路由器）

const routes = [
  { 
    path: "/", 
    name: "Home", 
    component: Home,
    meta: {
      title: 'Title of my page',
      metaTags: [
       {
         name: 'description',
         content: "Nice description here"
       },
       {
        name: 'keywords',
        content: "all, of, my, keywords, here"
       }
      ]
    }
  },
  {
    path: "/privacy-policy",
    name: "PrivacyPolicyPage",
    component: PrivacyPolicyPage,
    meta: {
      title: 'Privacy Policy',
    }
  },
]

router.beforeResolve((to, from) => {
    document.title = to.meta.title || "my default title"
    if(to.meta.hasOwnProperty('metaTags')) {
      for(let x=0; x < to.meta.metaTags.length; x++) {
        let oldMeta = document.getElementsByTagName('meta');
        for(let m=0; m < oldMeta.length; m++) {
          if(oldMeta[m].name == to.meta.metaTags[x].name) {
            oldMeta[m].remove()
          }
        }
        let meta = document.createElement('meta')
        if(to.meta.metaTags[x] && to.meta.metaTags[x].hasOwnProperty('name')) {
          meta.name = to.meta.metaTags[x].name
          meta.content = to.meta.metaTags[x].content
        }
        if(to.meta.metaTags[x].hasOwnProperty('property')) {
          meta.property = to.meta.metaTags[x].name
          meta.content = to.meta.metaTags[x].content
        }
        document.head.appendChild(meta)
      }
    }
    // next()
})

export default router;

我在我的路由器中构建了这个，它确实解决了我的问题，并允许我在我的本机 Vue 路由器中管理所有元标记。我一直在玩它并检查机器人和索引，它似乎工作正常。