我正在做一个Vue.js项目，我需要根据从API接收的数据动态设置Meta title，description和image。我使用Vue Vue Unhead和Vue Meta来处理meta tags。下面是我项目中的相关代码：
在main.js中：

import "./assets/main.css";

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "./plugins";
// import { createMetaManager } from "vue-meta";
import { createHead } from '@unhead/vue'

const app = createApp(App);
app.use(router);
app.use(store);
// app.use(createMetaManager()); // Use Vue Meta plugin
const head = createHead()
app.use(head)
app.mount("#app");

字符串
在详细信息页面onMounted函数上，我调用了一个函数，该函数将调用API并使用axios获取数据

import { onMounted } from "vue";
import axios from "axios";

onMounted(() => {
  fetchOperatorDetail();
});

function fetchOperatorDetail() {
  axios.get(
    `api/route`,
    {
      headers: {
        'time_zone': timeZone,
      }
    }
  ).then((response) => {
    if (Object.keys(response.data.data).length > 0) {
      // Extract data from the API response
      // How can I set this data to the meta title, description, and image dynamically?
    }
  });
}

型

最终的目标是当我将详细页面的URL分享到任何平台时，它应该显示Meta标题，并沿着图像的描述。

我尝试过为meta title设置静态文本，但我很难根据API响应动态更新描述和图像。有人能指导我如何使用Vue Unhead和Vue Meta实现这一点吗？或者建议一种替代方法？
附加上下文：
1.我已经尝试过使用Vue Unhead和Vue Meta来设置meta标签。
1.该项目使用Vue.js版本3构建。

更新我的Index.js看起来像这样

import { createRouter, createWebHistory } from "vue-router";
import ListView from "../components/views/ListView.vue";
import { nextTick } from "vue";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "home",
      component: ListView,
     // meta: { title: "ListView" },
    },
    {
      path: "/:detailpage/:packageid?",
      name: "detailpage",
      component: () => import("../components/views/detail page.vue"),
      //meta: { title: "detail page" },
    },
  ],
});

// const DEFAULT_TITLE = "detailpage";

// router.afterEach((to, from) => {
//   nextTick(() => {
//     document.title = to.meta.title || DEFAULT_TITLE;
//   });
// });

export default router;

型