Vue router addRoutes deprecated but I want to add array of routes to Vue router

Question

This is my Main.js. I'm fetching routes from the database through an API call but Vue router version 4 deprecated addRoutes functionality. So now I can add only one route at a time. I don't want to add routes by iterating the routes/menu list. Please share your thoughts.

new Vue({
    store,
    router,
    render: h => h(App),
    beforeMount() {
      if (this.menuList.length) {
        this.$router.addRoutes(this.menuList);
      }
    },
    computed: {
      ...mapGetters({
        menuList: "menuStore/menuList"
      })
    },
    
  }).$mount("#app");

Where did you get that addRoute is deprecated? I didn't find mentioned it in docs router.vuejs.org/api/interfaces/router.html#addroute — Luckylooke
– Luckylooke, Commented Aug 16, 2022 at 10:52
@Luckylooke for vue router 3, router.addRoutes is marked deprecated here. In 4 this method is no longer there. — tinystone
– tinystone, Commented Jul 18, 2023 at 2:24

Uncoke · Accepted Answer · 2021-06-18 07:47:11Z

2

To add routes from my modules I use this simple code:

MyRoutes.forEach(function(route){
    router.addRoute(route);
})

Old code:

router.addRoutes(MyRoutes)

So you code should be something like:

this.menuList.forEach(function(route){
  this.$router.addRoute(route)
});

answered Jun 18, 2021 at 7:47

Uncoke

1,9224 gold badges33 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jithin Vijayan Over a year ago

But this menu list will contain more than 10 menu items with more than 3 sub-menu items in each menu. How can we handle this?

Collectives™ on Stack Overflow

Vue router addRoutes deprecated but I want to add array of routes to Vue router

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related