Vue-router: Improve docs example for nested routes

[kristianmandrup]

In the nested routes docs I see the following example.

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // UserProfile will be rendered inside User's <router-view>
          // when /user/:id/profile is matched
          path: 'profile',
          component: UserProfile
        },
        // ...

I propose the following improvement:

const router = new VueRouter({
  routes: [
    { 
      path: '/user/:id', component: User,
      children: User.routes
    }

Cheers ;)

[fnlctrl]

Hi, thanks for filling this issue.

I don't think it would really be an improvement because it would make the example less obvious and straightforward, and we don't want to encourage the practice of defining child routes inside a component, because it may not be the best for everyone's use case. So let's just keep the example simple.

[kristianmandrup]

@fnlctrl Really!? I've been working with Aurelia lately and there it is considered best practice.
I personally think it's a "bad" idea to define all of the app routes at the root level.
Better to have each component define its local (relative) routes and then build the nested router that way... (i.e. a truly nested router) so that the router works just like components and has a fractal structure.

This also means that each subcomponent can be maintained separately, including its local routes. Just my 2 cents. I'd for sure prefer this pattern in my own projects, but each to his own preference.
Cheers ;)

[smyth64]

@kristianmandrup @fnlctrl
I have an example for the documentation:

My router.js

import { routes as MyProjectsRoutes } from './components/dashboard/projects/routes'
...
routes: [
    {
      path: '/dashboard/projects',
      component: MyProjects,
      children: MyProjectsRoutes
    }
]

and in the components/dashboard/project/routes.js

import Detail from './detail'

export const routes = [
  {
    path: 'detail',
    component: Detail
  }
]

Works like charm!

I like this approach more than defining all routes in one file.

[kristianmandrup]

Yes, I ended up doing the same :) much better pattern!