Learning Vue

Chapter 8. Routing

In previous chapters, we have learned the fundamentals of Vue components and different approaches to composing a Vue component. We proceeded to create reusable component logic as standalone composable using Composition API. We also learned about more advanced concepts of rendering and custom plugin creation.

This chapter will explore a different aspect of building a Vue application, routing, by introducing you to the concept of a routing system with Vue Router, the official routing management library for the Vue application, and its core API. We then learn how to configure the app’s routes, pass and handle data between the application’s paths using router guards, and build dynamic and nested routes for our application.

What is Routing?

When users navigate around the web, they enter a Uniform Resource Locator (URL) in the browser’s address bar. A URL is the address of a resource within the web. It contains many parts, which we can divide into the following significant sections (Figure 8-1):

Location

Includes the protocol, the application’s domain name (or IP address of the web server), and the port used to access the requested resource.

Path

The path to the requested resource. In web development, we use it to determine the page component to render on the browser side based on a predefined path pattern.

Query parameters

A set of key-value pairs for passing additional information to the server, separated by an & symbol. We mainly use query parameters to ...