Understanding Vue Router

As stated in the Vue.js documentation, Vue Router is the official router service for any Vue.js application. It provides a single-entry point for communication between components with routes and therefore effectively controls the application’s flow, regardless of the user’s behavior.

Installing Vue Router

Vue Router is not installed by default; however, it can easily be enabled when creating an application with Vite. Create a new application by running the following command:

npm init vue@3

Select the Yes option for adding Vue Router to the project as shown in Figure 7.1:

Figure 7.1 – Adding Vue Router during creating a project

Note

If you would like to add Vue Router to an existing Vue.js application, you can install it as an application’s dependency with the following command:

npm install vue-router

The next step is understanding how Vue Router synchronizes the browser URL and the...