title: How to update vue-router
body: <p>I am new to vuejs I work with vue cli 3. and I have a project with different components. I have a menu component, where I get all the menu items from an api(code bellow).
  I have installed vue-router, to do the routing, but my problem is that I dont know how to fill the routes array inside router object. I have searched a lot but nothing helped.</p>
  
  <p>So basically instead of filling the routes with harcoded paths, and components.. I want to automatically fill it with the items I get from the api.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;template&gt;
    &lt;div class="Menu"&gt;
      &lt;nav class="navbar navbar-default navbar-custom"&gt;
        &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
            &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"&gt;
              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="collapse navbar-collapse" id="navbar-collapse-1"&gt;
            &lt;ul class="nav navbar-nav navbar-right" v-for="menu in main_menu" v-bind:key="menu.menu_item"&gt;
  
              &lt;router-link class="dropdown-toggle" data-toggle="dropdown" :to="menu.menu_url"&gt;&lt;/router-link&gt;
              &lt;li&gt;&lt;router-link :to="menu.menu_url"&gt;{{ menu.menu_item }}&lt;/router-link&gt;
                &lt;ul class="dropdown-menu" v-for="list in menu.list_item" v-bind:key="list.url"&gt;
                  &lt;li&gt;&lt;router-link v-bind:to="list.menu_url"&gt;{{ list.title }}&lt;/router-link&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
  
            &lt;/ul&gt;
  
          &lt;/div&gt;
          
        &lt;/div&gt;
      &lt;/nav&gt;
      &lt;router-view&gt;&lt;/router-view&gt;
  
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    import axios from 'axios';
  
    export default {
    name: 'Menu',
    data () {
      return {
        main_menu: null,
        error:""
      }
    },
    mounted () {
      //console.log(this.page);
      axios({ method: "GET", "url": "http://apiurl" }).then(result =&gt; {
        this.main_menu = result.data.main_menu;
      },
      error =&gt; {
        this.error = error;
      });
    }
    }
  }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>the router.js is:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import Vue from 'vue'
  import Router from 'vue-router'
  import Home from './views/Home.vue'
  
  Vue.use(Router)
  
  var route = [
    {
      path: '/home',
      name: 'Home',
      component: Home
    },
    {
      path: '/awards',
      name: 'Awards',
      component: () =&gt; import('./views/Awards.vue')
    },
    {
      path: '/news',
      name: 'News',
      component: () =&gt; import('./views/News.vue')
    },
    {
      path: '/product',
      name: 'Product',
      component: () =&gt; import( './views/Product.vue')
    },
    {
      path: '/page',
      name: 'Page',
      component: () =&gt; import('./views/Page.vue')
    }
  ];
  
  export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: route
  })</code></pre>
  </div>
  </div>
  </p>
  
  <p>And the json I get from the api :</p>
  
  <pre><code>main_menu: [
      {
        menu_item: "Home",
        menu_url: "/home",
        list_item: [ ]
      },
      {
        menu_item: "Awards",
        menu_url: "/awards",
        list_item: [ ]
      },
      {
        menu_item: "Product",
        menu_url: "product",
        list_item: [
          {
            url: "/product/sticker",
            title: "sticker"
          },
          {
            url: "/product/cup",
            title: "Promotion Cup"
          }
        ]
      },
      {
        menu_item: "News",
        menu_url: "/news",
        list_item: [ ]
      },
      {
        menu_item: "Page",
        menu_url: "/page",
        list_item: [ ]
      }
    ]
  </code></pre>
  
  <p>Thank you.</p>