Vue Router Architecture and Nested Routes
Tags: vue, javascript, tutorial, programming
Published: 2019-03-21 16:55:52

---
title: Vue Router Architecture and Nested Routes
published: true
description: How do i work with nested routes in vue router architecture
tags: #vue #javascript #tutorial #programming
series: Vue Router Architecture
cover_image: https://thepracticaldev.s3.amazonaws.com/i/9xfgp7wxw6er5fh9vim7.png
---

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

![](https://media.giphy.com/media/fnspESRmMpwwUGS9hs/giphy.gif)

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

![](https://media.giphy.com/media/cNWU2Zeh54VJC/giphy.gif)

(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

{% github berniwittmann/vue-router-architecture %}


### 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: 

{% link https://dev.to/berniwittmann/handling-dialogs-with-vue-router-29ji %}


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

![Peace Out](https://media.giphy.com/media/XJc7H1ne2pc9lPyVkL/giphy.gif)