Vue3 中的動態標題與 vue-meta 組合 API

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
  ...
})