#Routing

#Guide

Vue Router is the official router for Vue. It allows you to define routes and map them to components, enabling navigation between different views in your application.

The following components have built in support for routing:

• v-breadcrumbs
• v-btn
• v-card
• v-chip
• v-list

These components can act like a router-link and have access to props such as to and exact:

<v-btn to="/home" text="Home"></v-btn>

#Router view transitions

Vue Router lets you add transitions between different views. The router-view component is used to render the current route’s component, and you can use the transition component to add transitions between different views.

<template>
  <v-app>
    <v-app-bar app>
      <v-toolbar-title>My App</v-toolbar-title>
    </v-app-bar>

    <v-main>
      <router-view v-slot="{ Component }">
        <v-fade-transition hide-on-leave>
          <component :is="Component" />
        </v-fade-transition>
      </router-view>
    </v-main>
  </v-app>
</template>

Visit the Transitions page for more information.