[英]Dynamic title in Vue3 with vue-meta composition API
I am trying to get a dynamic title for useMeta with composition API but it does not work.我正在尝试使用 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>
here is the response这是回应
{
"data": {
"post": {
"data": {
"id": 4,
"attributes": {
"title": "This is the post title"
}
}
}
}
}
Please help me understand what is wrong here!请帮助我了解这里出了什么问题!
Maybe It's too late to answer this question.也许现在回答这个问题为时已晚。 This module is for vue2.此模块适用于 vue2。 After many searches, I found version 3 of this module, But It's at the alpha stage, now.经过多次搜索,我找到了这个模块的第 3 版,但现在处于 alpha 阶段。
I found an alternative solution that doesn't need any dependency.我找到了一个不需要任何依赖的替代解决方案。
Create a new file somewhere in your project directory(utils.js) and put the below code in it:在项目目录 (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 }
Caution : You have to have the above code on your index.html
file.注意:您的index.html
文件中必须包含上述代码。
and for your use case just import it and use:对于您的用例,只需导入它并使用:
<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>
I use it in the router file (router/index.js) as well我也在路由器文件 (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
...
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.