Vue js условный оператор внутри ax ios fetch API - PullRequest
Новая
       0

Vue js условный оператор внутри ax ios fetch API

0 голосов
/ 08 апреля 2020

У меня есть vue -рутер, подобный этому 

import Vue from 'vue';
import Router from 'vue-router';
import http from './helpers/http';
import Home from './views/Home/Home.vue';
import HomeMentor from './views/Home/HomeMentor.vue';


const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: '',
      component: () => import(/* webpackChunkName: "Container" */ './components/Container.vue'),
      children: [
        {
          path: '/',
          name: 'Dashboard',
            component: {
              render(c) {
                http.request('GET', '/profile').then( async ({ data }) => {
                  console.log(data.profile.email)
                  if (data.profile.email === "vickysultan08@gmail.com") {
                      console.log('sip')
                      return c(HomeMentor);
                  } else {
                      return c(Home);
                  }
                });
              }
            },
          }
        ],
       beforeEnter: isAuthentication,
     }
});

Дело в том, что только компонент return внутри условного оператора не может быть выполнен внутри оператора ax ios как результат ниже

enter image description here

В то время как компонент возврата внутри условного оператора может быть выполнен вне оператора ax ios, как этот 

children: [
        {
          path: '/',
          name: 'Dashboard',
            component: {
              render(c) {
                  a = 10
                  if (a === 10) {
                      console.log('sip')
                      return c(HomeMentor);
                  } else {
                      return c(Home);
                  }
              }
            },
          }
        ],

I'm совершенно новый в Vue JS и должен продолжать код другого человека. Любой совет?

1 Ответ

2 голосов
/ 08 апреля 2020

К сожалению, функции рендеринга должны быть синхронными.

Вместо этого вы можете просто использовать функцию asyn c для возврата компонента, ala Asyn c Components и Маршруты с отложенной загрузкой . 

const Dashboard = () => http.request('GET', '/profile').then(({ data }) => {
  console.log('profile email', data.profile.email)
  let isMentor = data.profile.email === 'vickysultan08@gmail.com'
  let componentPath = `./views/Home/${isMentor ? 'HomeMentor' : 'Home'}.vue`
  return import(componentPath) // chains in the "import" promise
})

и затем по вашему маршруту ... 

component: Dashboard,

Если загрузка с отложенной загрузкой не является компонентом работая на вас, вы всегда можете попробовать предварительно загрузить его 

import http from './helpers/http';
import Home from './views/Home/Home.vue';
import HomeMentor from './views/Home/HomeMentor.vue';

const Dashboard = () => http.request('GET', '/profile').then(({ data }) => {
  let isMentor = data.profile.email === 'vickysultan08@gmail.com'
  return isMentor ? HomeMentor : Home
})
...