Vue Router sub-routes not working as expected

Question

When trying to get sub-routes to work using vue-router, my sub-routes are rendering the parent route component and not the declared component for that sub-route. It seems that a component must be declared for a parent route, or no component will be displayed at all. For instance, if I declare my routes like this:

Router.map({
    '/login': {
        component: Login
    },
    '/stations': {
        subRoutes: {
            '/': {
                component: Station
            },
            '/create': {
                component: CreateStation
            }
        }
    },
});

Nothing is displayed on any route. But if I declare my routes like this:

Router.map({
    '/login': {
        component: Login
    },
    '/stations': {
        component: Station,
        subRoutes: {
            '/create': {
                component: CreateStation
            }
        }
    },
});

My stations/create route displays the same component as the stations route. What gives?

Hector Lorenzo Hector Lorenzo · Accepted Answer · 2016-08-11T03:41:02

You still need to declare the root component for the /stations route, like this:

'/stations': {
    component: Station,
    subRoutes: {
        '/': {
            component: ListStations
        },
        '/create': {
            component: CreateStation
        }
    }
}

According to the documentation:

router.map({
  '/foo': {
    component: Foo,
    // add a subRoutes map under /foo
    subRoutes: {
      '/bar': {
        // Bar will be rendered inside Foo's <router-view>
        // when /foo/bar is matched
        component: Bar
      },
      '/baz': {
        // Same for Baz, but only when /foo/baz is matched
        component: Baz
      }
    }
  }
})

Now, with the above configuration, when you visit /foo, nothing will be rendered inside Foo's outlet, because no sub route is matched.

Update:

When you create subroutes, you are telling the parent component (in this case Station), that it will need to host some components inside its template. Station and CreateStation don't sit side by side, they have a parent-child relationship (in terms of routes).

That's why the component Station needs to have a router-view element in its template, and both ListStations and CreateStation will render inside it.

Something like this: http://jsfiddle.net/naeg67da/329/

Vue Router sub-routes not working as expected

1 Answers