title: How to make dynamic routes on the vue router?
body: <p>My <em>MainNavBar</em> component like this : </p>
  
  <pre><code>&lt;template&gt;
    ...
    &lt;v-list-item
      v-for="(item, index) in listMenu"
      :key="index"
      @click="goTo(item)"
    &gt;
      &lt;v-list-item-content&gt;
        &lt;v-list-item-title&gt;{{ item }}&lt;/v-list-item-title&gt;
      &lt;/v-list-item-content&gt;
    &lt;/v-list-item&gt;
    ...
  &lt;/template&gt;
  &lt;script&gt;
    export default {
        ...
        methods: {
          goTo(key) {
            this.$router.push({ name: key });
          },
          ...mapActions("dataStore", ["getMenu"])
        },
        computed: {
          ...mapGetters("dataStore", ["listMenu"])
        }
      };
  &lt;/script&gt;
  </code></pre>
  
  <p><em>listMenu</em> taken from API. It is a menu list</p>
  
  <p>My router configuration like this :</p>
  
  <pre><code>import Vue from "vue";
  import Router from "vue-router";
  import Application from "@/pages/Application"
  import MainNavbar from "@/layout/MainNavbar";
  ...
  import { APPLICATION_ROUTE as RouteConfig } from "./route-config";
  
  Vue.use(Router);
  export default new Router({
    mode: 'history',
    routes: [
      {
        path: "/menu-first",
        name: RouteConfig.APPLICATION_NAME_1.NAME,
        components: { default: Application, header: MainNavbar }
      },
      {
        path: "/menu-two",
        name: RouteConfig.APPLICATION_NAME_2.NAME,
        components: { default: Application, header: MainNavbar }
      },
      ...
    ]
  });
  </code></pre>
  
  <p>My <em>RouterConfig</em> like this :</p>
  
  <pre><code>export const APPLICATION_ROUTE = {
      APPLICATION_NAME_1: {
          NAME: "menu-first"
      },
      APPLICATION_NAME_2: {
          NAME: "menu-two"
      },
      ...
  };
  </code></pre>
  
  <p>And my application component like this :</p>
  
  <pre><code>&lt;template&gt;
    &lt;v-flex xs12&gt;
      &lt;v-card dark color="light-blue darken-4"&gt;
        &lt;v-card-title&gt;
          &lt;v-flex xs4&gt;
            &lt;p class="title"&gt;Name&lt;/p&gt;
            &lt;p class="body-2 margin-sub-text"&gt;{{detailMenu.name}}&lt;/p&gt;
          &lt;/v-flex&gt;
          &lt;v-flex xs4&gt;
            &lt;p class="title"&gt;URL&lt;/p&gt;
            &lt;p class="body-2 margin-sub-text"&gt;{{detailMenu.url}}&lt;/p&gt;
          &lt;/v-flex&gt;
          &lt;v-flex xs4&gt;
            ...
          &lt;/v-flex&gt;
        &lt;/v-card-title&gt;
      &lt;/v-card&gt;
    &lt;/v-flex&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { mapActions, mapState, mapGetters } from "vuex";
  export default {
    ..
    created() {
      this.getDetailMenu(this.$route.path);
    },
    computed: mapState({
      data: state =&gt; state.dataStore.data,
      ...mapGetters("dataStore", ["detailMenu"])
    }),
    methods: {
      ...mapActions("dataStore", ["getDetailMenu"]),
    },
    watch: {
      $route() {
        this.getDetailMenu(this.$route.path);
      }
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>From the configuration router, my router is not dynamic. I want to make my router dynamic. So the path in the router configuration is taken from <em>listMenu</em> (API)</p>
  
  <p>How do I do that?</p>