Allow components to define their routes in their definition file instead of having them all in one place

[asynkayo]

Since components are already taking care of not polluting other places, I believe it would be really nice to have components declare their own routes (subroutes actually) in their own space.
This would really help for huge apps and it would favor components reusability.
I was thinking of a 'routes' object in the component's definition object but this could be in a vue file
as well.

[b12k]

Very arguable feature.
I personally do no like this approach. It kind of Symfony and some .Net MVC workarounds...
I like to open a single file with routes and see how app works.

[asynkayo]

Well of course, just like any features they are arguable.
I guess it's not about your personal taste though but potential flexibility at zero cost.
Components are exactly that.
I'd like to open only one file to see how a component work.
Adding dev tools to dump all the routes of an app should also be quite easy...

[jonagoldman]

It can be useful if you have big app with totally isolated parent components. For example if you have a Public component (not authenticated users) and a Private component (authenticated users), then maybe you can split the routes in two. But in general it's better to have a file where you can see all the possible routes.

[amirrustam]

I can see how this would be useful for larger apps. Coming from the Python world, the popular Django framework does something similar. There is a root route map, and you can include route maps to individual root routes.

So here is a rough Django inspired proposal:

route.map({
  '/foo' : {
    component: Foo
  }
})

And the Foo component can provide the nested routes with in a map property of the already implemented route property:

var Foo = Vue.extend({
  // ...
  route: {
    map: {
      'bar/:id' { component: Bar }
    }
 }
})

The route /foo/bar/:id would route to the Bar component.

I thought this up quickly, so I'm not sure what consequences might come out of this method of defining routes.

[Jnesselr]

I do like the idea of being able to separate them like this, but the v-link would have to be the full path and not the partial path, in case I needed to link to something outside of it. This would, in my mind, make a sub-component possibly depend on another component.

Other than that issue, I do like the idea, because it lets me get a high level overview of the routes without having to dive in to any particular one. When you have a ton of components and you're dealing with routes and subroutes, it gets a bit tedious.

[perkola]

While it is arguable to keep all routes and sub-routes together to improve readability, is there anyway to get around having to import all the components used in that routes file? For example:

import Archive from './Archive.vue'
import ArchiveIndex from './components/archive/Index.vue'
import ArchiveShow from './components/archive/Show.vue'

...

router.map({
    '/archive': {
        component: Archive,
        subRoutes: {
            '/': { component: ArchiveIndex },
            '/:slug': { component: ArchiveShow }
        }
    }
})

Somehow it feels like the components of the sub-routes should be imported in the parent component.

[chmln]

is there anyway to get around having to import all the components used in that routes file?

If you use webpack you can import components into router.map() like this
`

'/register': {
    name: "register",
    component: resolve => require(['./Register.vue'], resolve)

},

'/login': {
    name: "login",
    component: resolve => require(['./Login.vue'], resolve)
},`

[perkola]

@chmln does Browserify support this? I can't seem to find it in the documentation.

[javisperez]

@perkola yes, browserify support it, i'm using it with gulp, here's an example of how i'm doing it:

router.map({
    '/manage': {
        component: require('./manage/manage.vue')
    }
});

[airtonix]

modules providing their own routes is how Django works too.

Promotes modularising complete functionality.

@perkola, the browserify example doesn't actually do the same thing as the webpack example. read more here: http://router.vuejs.org/en/lazy.html

[lkiarest]

It's helpful when we need to add subRoutes at runtime, when our webapp supports widgets that are developed by 3rd parties and dynamically loaded.

[inssitu]

I really like the idea... See this in a component would be awasome

route: {
  name: 'newPosts',
  path: 'posts/news'
}