загружать маршруты из API и импортировать представления динамически - PullRequest
Новая
       2

загружать маршруты из API и импортировать представления динамически

0 голосов
/ 27 мая 2019

Большинство моих маршрутов защищены и требуют разрешения для доступа к ним. Когда пользователь успешно вошел в систему, мой Navbar компонент выполняет вызов API и получает набор маршрутов, к которым пользователь имеет доступ.

После этого я добавляю все файлы вида, соответствующие маршрутам, на панель навигации.

Это пример кода, показывающего процесс 

<template>
  <div>
    <router-link
      v-for="navItem in navItems"
      :key="navItem.title"
      :to="navItem.url"
    >{{ navItem.title }}</router-link>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      navItems: []
    };
  },
  created: async function() { // Setup the router here
    this.navItems = [
      // !!! API CALL !!!
      {
        title: "Dashboard",
        url: "/Dashboard"
      },
      {
        title: "Users",
        url: "/users/Users"
      },
      {
        title: "Groups",
        url: "/groups/Groups"
      }
    ];

    const routes = await this.navItems.map(async navItem => {
      const { url } = navItem;

      return {
        path: url,
        component: await import(`../views${url}.vue`)
      };
    });

    this.$router.addRoutes(routes);
  }
};
</script>

К сожалению, я получаю эту ошибку

Uncaught (в обещании) Ошибка: [vue-router] "путь" требуется в конфигурация маршрута.

но, как видно из примера кода, этот атрибут установлен. Я создал образец проекта здесь

https://codesandbox.io/s/vue-routing-example-i2znt

Если вы позвоните по этому маршруту

https://i2znt.codesandbox.io/#/Dashboard

Я ожидаю, что маршрутизатор отобразит файл Dashboard.vue.

1 Ответ

1 голос
/ 28 мая 2019

созданный вами массив маршрутов не содержит ваши объекты маршрутов. Это массив обещаний.

вы должны сделать что-то вроде 

Promise.all(routes).then(resolvedRoutes => {
    this.$router.addRoutes(resolvedRoutes)
})
...