我正在写一个简单的博客,我正在使用Vue3和Villus发送GraphQL查询。我构建了一个显示我所有帖子的组件。这很好用,在这个组件中,我在单个帖子的URL中发送ID。为此,我构建了一个 * blogpost_gql * 组件。我需要GraphQL查询的ID。该ID是来自Vue路由器的URL的一部分。
URL如下所示:text
我尝试使用的:'
this.$route.params.id
'这个函数在setup()中不起作用。* variables * 中的static * id * 可以很好地查询模式。我发现这与生命周期钩子有关。但我没有找到解决办法。
这是我的当前代码:
'
<script>
import { useQuery } from 'villus';
import ImageText from "@/components/Molecules/ImageText/ImageText";
export default {
name: "BlogEntry_GraphQL",
components: {ImageText},
setup() {
console.log('Hallo setup')
const PostById = `
query PostById ($id: String) {
postById (id: $id){
title
publishDate
author
category
imageUrl
content
id
published
slug
}
}
`;
const { data } = useQuery({
query: PostById,
variables: { id: this.$route.params.id },
});
return { data };
},
};
</script>
我真的希望你能帮我
我想从URL中获取 * id *。在此之后,我想使用此ID进行查询。
1条答案
按热度按时间wnavrhmk1#
在Vue 3中,
setup
生命周期钩子有点特殊:它不能访问this
,因为组件还没有创建,所以this
什么都不引用.要访问当前路由状态,必须使用公开的vue-router可组合项,如文档中所述:vue-路由器组合-API: