使用Vue,如何在Apollo查询中检查a的存在并在进入路由器之前对其进行测试?

问题描述

我想使用Apollo导入企业和子公司列表,然后将它们添加到我的路由器中。如果该子弹不存在,我要显示404页面

查询在组件中运行良好,我只需要知道如何在路由器中使用它即可。

我知道我需要检查beforeEnter函数中是否存在该子对象,但是我不知道在哪里添加Apollo查询或如何查找该查询数据中是否存在该子对象。

这是我的路由器

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",name: "Home",component: Home
  },{
    path: "/:business",name: "Business",component: () => 
      import(/* webpackChunkName: "BusinessHome" */ "../views/BusinessHome.vue"),beforeEnter: (to,from,next) => {

     /* HOW DO I CHECK THE SLUG EXSISTS WITHIN AN APOLLO QUERY? */
      
      if(exsists){
        next();
      }
      else{
        next({name: "NotFound"});
      }
    }
  },{
    path: "/404",alias: "*",name: "NotFound",component: () => import(/* webpackChunkName: "NotFound" */ "../views/NotFound"),}
];

const router = new VueRouter({
  mode: "history",base: process.env.BASE_URL,routes
});

export default router;

这是GQL文件

import { gql } from "apollo-boost"
export default gql`
  query businesses{
  businesses(first: 500,where: {status: PUBLISH}) {
    edges {
      node {
        id
        title
        slug
        featuredImage {
          node {
            sourceUrl(size: THUMBNAIL)
          }
        }
        businessContactDetails {
          emailaddress
          phonenumber
        }
      }
    }
  }
}
`

我是vue.js和Apollo的新手,所以我们将不胜感激。

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)