Working with nested routes can be quite a hassle...

Therefore I did come up with a conclusion on how to keep the routing configuration clean and to ease the working with nested routes.

There are already some tutorials on how to work with Vue Router in general, but I want to focus on this specific issue and the architecture around it.

I'll guide you through the creation of the example repo below and show you how I solved this

The main issue

The main problem is that if you want to nest routes the parent route component needs to always contain a <router-view></router-view>. This can be quite annoying sometimes and in my opinion it just does not feel right. Also this leads to high coupling between the component itself and its sub-routes / the routing.

Step 1: Add an EmptyRouterView Component

At first we create an EmptyRouterView Component, which just contains <router-view></router-view>.

<template>
  <router-view></router-view>
</template>

That is nearly the whole magic. Now we just need to use this component correctly in our route configuration

Step 2: Adjust your Components to the new architecture

Head over to your route config (probably router.js)

The current config will probably look like this

// Old Config
  {
      path: '/my-route',
      component: MyRouteView,
      name: 'route',
      children: [...]
  }

Let's change it like this:

// New Config
 {
      path: '/my-route',
      component: EmptyRouterView,
      children: [{
        name: 'route',
        path: '',
        component: MyRouteView
      }]
  }

We declare some kind of abstract Route with the EmptyRouterView as component. as a default child component we now add our old route configuration, but with an empty path. The empty path leads to this child route to be rendered when a user navigates to /my-route.

You'll also notice, that we gave our abstract parent route no name. This also helps, since when we add links to our application and refer to routes by name, we won't accidentally render the empty parent route.

Step 3: Nesting Routes

Now we can easily nest routes:

// Nested Config
 {
      path: '/my-route',
      component: EmptyRouterView,
      children: [{
        name: 'route',
        path: '',
        component: MyRouteView
      }, {
        name: 'route.child-one'
        path: 'child-one',
        component: ChildOneView
      }, {
        name: 'route.child-two'
        path: 'child-two',
        component: ChildTwoView
      }]
  }

See how easy it is to nest routes 💪🏻 When a user navigates to /my-route/child-one the ChildOneView should be rendered as intended.

Step 4: Deep Nesting Routes

We can also nest routes in our nested routes. Some kind of Route-ception

(Yes I know: bad wordplay 😁)

// Deep Nested Config
 {
      path: '/my-route',
      component: EmptyRouterView,
      children: [{
        name: 'route',
        path: '',
        component: MyRouteView
      }, {
        path: 'sub',
        component: EmptyRouterView,
        children: [{
            name: 'deep',
            path: '',
            component: MyDeepRouteView
          }, {
            name: 'deep.child-one'
            path: 'deep-one',
            component: ChildOneView
          }, {
            name: 'route.child-two'
            path: 'deep-two',
            component: ChildTwoView
          }]
      }]
  }

The path /my-route/sub/deep-one would lead to ChildOneView beeing rendered.

I think I reached my word limit of the word routes, therefore I'll leave you with this. I condensed all of this in a repo, where you can see it all in action

npm install

npm run serve

Short Spoiler: Modals

In the next part of this little series on Vue Router Architecture I would like to talk about handling Modals with Vue Router. The approach I explained above also has another advantage. It makes it very easy to deal with Dialogs (These Popups/Modals, I never know what to call them 🙄). Find Part 2 here:

Handling Dialogs with Vue Router

Bernhard Wittmann ・ Apr 17 '19 ・ 2 min read

#vue #tutorial #javascript #programming

I know there may be a hundred different approaches on this topic and I'd be glad to hear your thoughts on this 😉 And as always: should you have any questions, don't hesitate to ask