Learning about nested routes
SPAs are very powerful but the addition of a well-structured router, such as vue-router, can help take SPAs to another level. The strength of a SPA relies on its ability to swap components on the fly without the need to refresh the page, but what if I told you that vue-router can go even deeper than a page layout? This is where nested routes come in handy.
Nested routes provide you with the ability to define routes within routes, multiple levels deep, to create a very complex layout. The concept of nested routes may sound complicated, but their use makes the application easier to develop and they are recommended for most applications.
When we created the main routes, we said that the page would be swapped entirely when on navigation; with nested routes, the concept is the same, but instead of swapping the full page, we just swap an internal part of the page.
Figure 10.6: Example of nested routes
To better understand how...
