Routing

Like Angular and React, Vue.js has its own router. Vue's official router library is called the Vue Router (https://router.vuejs.org). Vue Router offers a really easy-to-use solution for managing routing on the client side with Vue.js.

While covering Angular in the previous chapters, we couldn't look at its router due to space constraints. In the next chapter, we'll take some time to introduce routing so that we can structure our application and learn how to leverage this important concept of modern web applications.

As we'll see, the router will allow us to split our application into multiple pages and associate each of those with a specific route (URL). The Vue Router is a URL router, as opposed to a state router, like the Angular router is. If you already know about Angular's router, you'll quickly see the difference between them.

Basically, the idea is that a state router associates a set of components with a state, and states can be nested if needed. Most importantly, a state router does not mandate each state to be associated with a different URL, while a URL router uses URLs as the top-level concept.

The Vue Router library is very powerful and has a broad feature set. For example, it supports route parameters/queries/wildcards, transition effects, fine-grained navigation control, the HTML 5 history API (which is used to update the browser's history while navigating within the client-side application), and much more.

While developing the LyricsFinder application in the next chapter, we'll only use a small subset of features of Vue Router, but don't hesitate to explore on your own. Installing, configuring, and using it will help you understand what it is and how it works.