How to make dynamic routes on the vue router?

by

I suppose getDetailMenu is calling API method to get listMenu.
You can create route dynamically using addRoutes method

Pseudo code

created() {
  this.getDetailMenu(this.$route.path)
    .then((listMenu) => {
      // you need to return listMenu from getDetailMenu
      listMenu.forEach((item, index) => createAndAppendRoute(item, index))
    })
},
methods: {
  createAndAppendRoute: (item, index) => {
    console.log(item, index)
    // Base on your data, you should be able to create router name and path from item and index
    // here is just an example
    let newRoute = {
      path: `/${item}`,
      name: `${item}_${index}`,
      components: { default: Application, header: MainNavbar },
    }

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

More Related Contents:

  1. VueJS access child component’s data from parent
  2. Can we make vue.js application without .vue extension component and webpack?
  3. Vuex – Computed property “name” was assigned to but it has no setter
  4. How to add external JS scripts to VueJS Components?
  5. How can I solve “Interpolation inside attributes has been removed. Use v-bind or the colon shorthand”? Vue.js 2
  6. Communication between sibling components in Vue.js 2.0
  7. Vue Router return 404 when revisit to the url
  8. Vuex – Do not mutate vuex store state outside mutation handlers
  9. Accessing Vuex state when defining Vue-Router routes
  10. vue-router — Uncaught (in promise) Error: Redirected from “/login” to “/” via a navigation guard
  11. Nuxt.js vuex store not persisted
  12. Vuex Action vs Mutations
  13. Vue.js – How to remove hashbang #! from url?
  14. Vue – how to pass down slots inside wrapper component?
  15. Is it possible to emit from mounted in Vuejs?
  16. How to access Vuex module getters and mutations?
  17. When should I use Vuex?
  18. Pass an object as param to router.push ([email protected])
  19. Passing props to Vue.js components instantiated by Vue-router
  20. Vuejs: Event on route change
  21. How to import and use image in a Vue single file component?
  22. Vuejs typescript this.$refs..value does not exist
  23. Can vue-router open a link in a new tab?
  24. What is nextTick and what does it do in Vue.js?
  25. Difference between v-model and v-bind on Vue.js?
  26. Add global variable in Vue.js 3
  27. How to navigate using vue router from Vuex actions
  28. Refused to apply style from ” because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled
  29. How to use microfrontends with Vue/Nuxt?
  30. Install vue 3.0 in laravel

Leave a Comment