Загрузить маршруты из API в VUE

Question

Я пытаюсь загрузить маршруты в приложении Vue из моего API. Я попытался отправить данные в переменную маршрутов и использовать метод addRoutes Но не повезло. Я думаю, что может быть проблема с асинхронным. Но почему addRoutes () не работает?

Вот мой код:

import Vue from 'vue';
import VueRouter from 'vue-router';
import axios from 'axios';

/**
 * Routes
*/
import item_index from '../../app/Tenant/Item/Views/Index.vue';
import contact_index from '../../app/Tenant/Contact/Views/Index.vue';
import eav_index from '../../app/Tenant/Eav/Views/create.vue';
import eav_create from '../../app/Tenant/Eav/Views/create.vue';

var routes = [
     { path: '/items', component: item_index, name: 'item_index' },
     { path: '/contact', component: eav_index , name: 'contact_index' , props: { entity_type_id: 1 }},
 ];


Vue.use(VueRouter);

const router = new VueRouter({
    mode: 'history',
    linkActiveClass: 'active',
    routes
});

axios
    .get('http://c1.fmt.dev/api/eav/entity_types')
    .then(response => {
        for (var i = 0; i < response.data.length; i++) {
            var type = response.data[i];
            var route = {
                path: '/' + type.name,
                component: eav_index,
                name: type.name + '_index',
                props: {
                    entity_type_id: type.id
                },
            };

            router.addRoutes([route]);
            alert(router.options.routes);
            // alert(JSON.stringify(routes));
        }
    })
    .catch(error => {
        console.log(error)
});

new Vue({
    el: '.v-app',
    data(){
      return {
        page_header: '',
        page_header_small: '',
      }
    },
    router, axios
});

Answer 1

Попробуйте этот улучшенный код. Без откладывания создания экземпляра Vue, без лишних задержек интерактивности страницы:

import Vue from 'vue'
import VueRouter from 'vue-router'
import axios from 'axios'

import item_index from '../../app/Tenant/Item/Views/Index.vue'
import contact_index from '../../app/Tenant/Contact/Views/Index.vue'
import eav_index from '../../app/Tenant/Eav/Views/create.vue'
import eav_create from '../../app/Tenant/Eav/Views/create.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  linkActiveClass: 'active',

  routes: [{
    path: '/items',
    component: item_index,
    name: 'item_index'
  }, {
    path: '/contact',
    component: eav_index ,
    name: 'contact_index' ,
    props: {entity_type_id: 1}
  }]
})

new Vue({
  el: '.v-app',
  router,

  data () {
    return {
      page_header: '',
      page_header_small: '',
    }
  },

  methods: {
    getDynamicRoutes (url) {
      axios
        .get(url)
        .then(this.processData)
        .catch(err => console.log(err))
    },

    processData: ({data}) => {
      data.forEach(this.createAndAppendRoute)
    },

    createAndAppendRoute: route => {
      let newRoute = {
        path: `/${route.name}`,
        component: eav_index,
        name: `${route.name}_index`,
        props: {entity_type_id: route.id}
      }

      this.$router.addRoutes([newRoute])
    }
  },

  created () {
    this.getDynamicRoutes('http://c1.fmt.dev/api/eav/entity_types')
  }
})

Для улучшения структуры кода и удобства чтения переместите определение маршрутизатора в отдельный файл:

В своем основном файле оставьте только этот код:

// main.js
import Vue from 'vue'   
import router from '@/router'
import axios from 'axios'

new Vue({
  el: '.v-app',
  router,

  data () {
    return {
      page_header: '',
      page_header_small: '',
    }
  },

  methods: {
    getDynamicRoutes (url) {
      axios
        .get(url)
        .then(this.processData)
        .catch(err => console.log(err))
    },

    processData: ({data}) => {
      data.forEach(this.createAndAppendRoute)
    },

    createAndAppendRoute: route => {
      let newRoute = {
        path: `/${route.name}`,
        component: eav_index,
        name: `${route.name}_index`,
        props: {entity_type_id: route.id}
      }

      this.$router.addRoutes([newRoute])
    }
  },

  created () {
    this.getDynamicRoutes('http://c1.fmt.dev/api/eav/entity_types')
  }
})

И в той же папке, где находится основной файл, создайте подпапку 'router' с 'index.js' внутри:

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'

import item_index from '../../../app/Tenant/Item/Views/Index.vue'
import contact_index from '../../../app/Tenant/Contact/Views/Index.vue'
import eav_index from '../../../app/Tenant/Eav/Views/create.vue'
import eav_create from '../../../app/Tenant/Eav/Views/create.vue'

Vue.use(VueRouter)

export default new VueRouter({
  mode: 'history',
  linkActiveClass: 'active',

  routes: [{
    path: '/items',
    component: item_index,
    name: 'item_index'
  }, {
    path: '/contact',
    component: eav_index ,
    name: 'contact_index' ,
    props: {entity_type_id: 1}
  }]
})

Answer 2

Экземпляр vue уже инициируется при попытке добавить маршруты (та же проблема, что и в этом вопросе: Как использовать метод addroutes в Vue-router? ). Вы можете отложить инициализацию vue после загрузки маршрутов:

//imports and stuff...

axios
    .get('http://c1.fmt.dev/api/eav/entity_types')
    .then(response => {
        for (var i = 0; i < response.data.length; i++) {
            var type = response.data[i];
            var route = {
                path: '/' + type.name,
                component: eav_index,
                name: type.name + '_index',
                props: {
                    entity_type_id: type.id
                },
            };

            // extend routes array prior to router init
            routes.push(route);
        }
        // init router when all routes are known
        const router = new VueRouter({
            mode: 'history',
            linkActiveClass: 'active',
            routes
        });

        // init vuw instance when router is ready
        new Vue({
            el: '.v-app',
            data(){
              return {
                page_header: '',
                page_header_small: '',
              }
            },
            router, axios
        });
    })
    .catch(error => {
        console.log(error)
});