Compose your routes hierarchically

In many cases, the organization tree of your website may be complex. In some cases, there is a clear hierarchical organization that you can follow and with nested routes, vue-routes helps you keep everything orderly. The best situation is if there is an exact correspondence with how URLs are organized and how components are nested.

Getting ready

In this recipe, you will use components and other basic features of Vue. You will also use dynamic routes. Go to the Using named dynamic routes recipe to find out more about them.

How to do it...

In this recipe, you will build an online accounting website for an imaginary world. We will have two users--Stark and Lannister--and we will be able to see how much gold and how many soldier these two have.

The HTML layout of our website is as follows:

<div id="app">
  <h1>Kindoms Encyclopedia</h1>
  <router-link to="/user/Stark/">Stark</router-link>
  <router-link to="/user/Lannister/">Lannister...