Defining the routes

In a web application, a route is a URL path pattern. Vue Router will map it to a specific handler. This handler is a Vue component, defined and located in a physical file. For example, when the user enters the localhost:3000/home route, if you map the HomeView component to this specific route, the routing system knows how to render HomeView content accordingly.

As seen in Figure 7.2, it is crucial to set up routes (or paths) for navigation within the application; otherwise, your application will display as empty.

Each route is an object literal that uses the RouteRecordRaw interface with the following properties:

interface RouteRecordRaw = {
  path: string,
  component?: Component,
  name?: string, // for named routes
  components?: { [name: string]: Component }, // for named
    views
  redirect?: string | Location | Function,
  props?: boolean | Object | Function,
 &...