Vue router-link: Usage Guide

The router-link in Vue is a component used for navigation, which can generate a link within the application. When the link is clicked, it can trigger a route transition.

The usage of router-link is as follows:

1. Import the router-link component:

import { RouterLink } from 'vue-router'

1. Use the router-link component in the template.

<router-link to="/path">Link Text</router-link>

The ‘to’ attribute specifies the path to jump to.

1. You can navigate using named routes:

<router-link :to="{ name: 'routeName' }">Link Text</router-link>

The name attribute specifies the named route to jump to.

1. You can set route parameters by passing props.

<router-link :to="{ name: 'routeName', params: { id: 1 }}">Link Text</router-link>

The params attribute specifies the route parameters that need to be passed.

1. You can replace the current route instead of adding a new entry to the history by setting the replace property.

<router-link to="/path" replace>Link Text</router-link>

1. You can customize the CSS class name for the active state by setting the active-class attribute.

<router-link to="/path" active-class="active">Link Text</router-link>

The active-class attribute specifies the CSS class name for the active state.

1. You can use the exact attribute to specify that the active state CSS class should only be applied when there is an exact match.

<router-link to="/path" exact>Link Text</router-link>

The above is the basic usage of router-link in Vue. It can be used to create navigation links and trigger route changes.