Vue-router: Provide method to get all routes

[goeh]

What problem does this feature solve?

If an application is split into several Vue components/libraries, each component can add their specific routes using router.addRoutes(array).
In the main application we then want to dynamically create menu items from all available routes. Currently there seems to be no way to get all routes, including those added with addRoutes().

We've done a workaround by importing routes manually from all included components and appending them into one array. This array is then used when constructing the router instance. It's a lot of boilerplate and easy to miss an import. A Router.getRoutes() method would really help in this use-case.

What does the proposed API look like?

router.getRoutes() or router.getAllRoutes() that returns an array of route configurations.

[yurii-github]

Yes, this is somewhat important data to get.
I did workaround for myself like

(function(f) {
  VueRouter.prototype._allRoutes = null
  VueRouter.prototype.allRoutes = function allRoutes () {
    return this._allRoutes
  }
  VueRouter.prototype.addRoutes = function addRoutes (routes = []) {
    if (this._allRoutes === null) { // init
      this._allRoutes = this.options.routes
    }
    routes.forEach(function(r) {
      // TODO: replace unique paths
      this._allRoutes.push(r)
    }.bind(this))
    return f.apply(this, arguments);
  }
})(VueRouter.prototype.addRoutes)

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {path: '/', component: require('./pages/Index.vue').default},
  ]
})

router.addRoutes([{path: '/about', component: require('./pages/About.vue').default},])
router.addRoutes([{path: '*', component: require('./pages/Error404.vue').default}])

console.log('ALL ROUTERS',router.allRoutes()) // 3 paths here

but it doesn't work for children and same path routes.

[hollote]

It will be good to have them all in one place, as for example here: router.options.routes.
All defined routes and all added dynamically. Can we have it somehow?

[iamzozo]

I've tried a simple solution with returning the pathMap also from the matcher, and make a getter on main instance: getRoutes. What do you think?
https://github.com/iamzozo/vue-router/commit/94145b97971050698a141275c368b1731f70f5aa

[posva]

@iamnotblank thanks! This method is unlikely to be added to the current version of Vue Router to avoid adding more breaking changes 😅
It will be on the next version though, as part of the Dynamic Routing API (https://github.com/vuejs/rfcs/pull/122)

[posva]

Added at 6bc30aa with limited functionality compared to v4