使用 vue-meta 组合 API 的 Vue3 中的动态标题

Question

我正在尝试使用组合 API 获取 useMeta 的动态标题，但它不起作用。

<script setup>
import { computed } from 'vue'
import { POST } from '@/constants/blog'
import { useQuery, useResult } from "@vue/apollo-composable";
import { useRoute } from 'vue-router'
import { useMeta } from "vue-meta";

  const route = useRoute();
  const variables = computed(() => ({
    slug: route.params.slug,
  }));
  const { result, loading, error } = useQuery(
    POST, variables
  );
  const post = useResult(result, null, data => data.post.data );
  const metaTitle = computed(() => ({
    title: post.attributes.title,
  }));
  useMeta(metaTitle);
  
</script>

这是回应

{
  "data": {
    "post": {
      "data": {
        "id": 4,
        "attributes": {
          "title": "This is the post title"
        }
      }
    }
  }
}

请帮助我理解这里出了什么问题！

Answer 1

也许现在回答这个问题已经太晚了。该模块适用于 vue2。经过多次搜索，我找到了该模块的版本 3，但现在处于 alpha 阶段。

我找到了一个不需要任何依赖的替代解决方案。

在项目目录中的某个位置创建一个新文件（utils.js）并将以下代码放入其中：

const changeMetaTags = (meta) => {
  document.title = `${meta.title} - YOUR PROJECT NAME`;
  // document.querySelector('meta[name="og:title"]').setAttribute("content", meta['og:title']);
  // document.querySelector('meta[name="description"]').setAttribute("content", meta.description);
  // document.querySelector('meta[name="og:description"]').setAttribute("content", meta['og:description']);
  // document.querySelector('meta[name="keywords"]').setAttribute("content", meta.keywords);
}




export { changeMetaTags }

注意：您的文件中必须有上述代码index.html。

对于您的用例，只需导入它并使用：

<script setup>
import { computed } from 'vue'
import { POST } from '@/constants/blog'
import { useQuery, useResult } from "@vue/apollo-composable";
import { useRoute } from 'vue-router'
import { useMeta } from "vue-meta";

import { changeMetaTags } from "@/infrastructures/seo/utils"; // <----- this

  const route = useRoute();
  const variables = computed(() => ({
    slug: route.params.slug,
  }));
  const { result, loading, error } = useQuery(
    POST, variables
  );
  const post = useResult(result, null, data => data.post.data );
  const metaTitle = computed(() => ({
    title: post.attributes.title,
  }));
  changeMetaTags(metaTitle.value); // <---- this
  
</script>

我也在路由器文件（router/index.js）中使用它

const router = createRouter({

  routes: [
    {
      path: "/",
      component: () => import("@/layouts/MainLayout.vue"),
      children: [
        {
          path: "",
          name: "Home",
          meta: { // <-------- add this
            title: "Home",
            description:
              "your description",
            "og:title": `YOUR PROJECT NAME home page`,
            "og:description":
              "og description",
            keywords:
              `your, keywords`,
          },
          component: () => import("@/views/HomeView.vue"),
        },
     ...
     ]
})

router.beforeEach((to, from) => {
  changeMetaTags(to.meta); // <----- and this
  ...
})