[Vuejs]-Vue Router sub-routes not working as expected

by

2👍

✅

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/

👤user900362

Leave a comment