load routes from api and import views dynamically

0
votes

The most of my routes are protected and require permissions to access them. When the user signed in successfully my Navbar component makes an API call and retrieves a bunch of routes the user is able to access.

After that I add all the view files matching to the routes to the navbar.

This is an example code showing the process

<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>

Unfortunately I get this error

Uncaught (in promise) Error: [vue-router] "path" is required in a route configuration.

but as you can see in the example code this attribute is set. I created an sample project here

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

If you call this route

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

I would expect the router to render the Dashboard.vue file.

1
vue.jsvue-router

1 Answers

1
votes

the routes array that you build doesn't contains your routes objects. It's an array of promises.

you should do something like 

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