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 https://router.vuejs.org/api/interfaces/router.html#addroute — Luckylooke, Aug 16 '22 at 10:52
@Luckylooke for vue router 3, `router.addRoutes` is marked deprecated [here](https://v3.router.vuejs.org/api/#router-addroutes). In 4 this method is no longer there. — tinystone, Jul 18 '23 at 02:24

score 1 · Answer 1 · answered Jun 18 '21 at 07:47

1

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 '21 at 07:47

Uncoke

1,832
4
26
58

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? – Jithin Vijayan Jun 22 '21 at 06:43

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

1 Answers1