我如何在 apollo 中获取路由器参数？ [VUE3]

Question

这是我在 VueJS 上的组件脚本。我想知道如何在我的 apollo 组件中获取路由器参数以使用这些参数搜索项目。这个想法是用页面的 id 替换 953 。如果您有任何问题，请问我！我正在使用来自 vue-router 和 VueJS 4 的 createRouter、createWebHashHistory。

感谢您的帮助。

<script>
import gql from "graphql-tag";
// import { useRouter } from "vue-router";
import TemplatePresentationPage from "./TemplatePresentationPage.vue";
export default {
    name: "PresentationPage",
    apollo: {
        entry: gql`
            query entry {
                entry(id: 953) {
                    id
                    title
                }
            }
        `,
    },
    components: { TemplatePresentationPage },
    setup() {
        return {};
    },
};
</script>

Answer 1

如果你的路线是这样的

const routes = [{ path: '/user/:id', component: User }]

然后要在您的组件上获取该 id 参数，您只需执行以下操作

const User = {
   // make sure to add a prop named exactly like the route param
   props: ['id'],
  template: '<div>User {{ $route.params.id }}</div>'
}

这也适用于您的模板

<template>
   <div>User {{ $route.params.id }}</div>
</template>

但是对于你的情况，你似乎想在你的 setup() 函数中使用它。 访问方式如下

import { useRoute } from 'vue-router';

export default {
 setup(){
  const route = useRoute();
  //console.log(route.params.parameterName)
}
}

我如何在 apollo 中获取路由器参数？ [VUE3]

How i can get router params in apollo ? [VUE3]

vue.js

apollo

apollo-client

vue-apollo