How to use router-link in Vue
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Using router-link in Vue Router provides declarative navigation with automatic active state management and seamless single-page application routing. As the creator of CoreUI with extensive Vue.js development experience, I’ve implemented router-link patterns extensively in navigation menus, breadcrumbs, and user interface components. From my expertise, the most effective approach is using router-link components with proper route configuration and active class styling for intuitive user navigation. This pattern provides accessible navigation with proper browser history management and visual feedback for current page state.
Use router-link components for declarative navigation with automatic active states and route parameter handling.
<template>
<nav>
<!-- Basic navigation -->
<router-link to='/'>Home</router-link>
<router-link to='/about'>About</router-link>
<!-- Navigation with route objects -->
<router-link :to='{ name: "UserProfile", params: { id: 123 } }'>
User Profile
</router-link>
<!-- Dynamic navigation with query parameters -->
<router-link
:to='{
path: "/search",
query: { q: searchTerm, category: "products" }
}'
>
Search Results
</router-link>
<!-- Custom active classes -->
<router-link
to='/dashboard'
active-class='nav-active'
exact-active-class='nav-exact-active'
>
Dashboard
</router-link>
<!-- Replace history instead of push -->
<router-link to='/login' replace>
Login
</router-link>
</nav>
</template>
<script>
export default {
data() {
return {
searchTerm: 'vue components'
}
}
}
</script>
<style>
.nav-active {
color: #007bff;
font-weight: bold;
}
.nav-exact-active {
background-color: #f8f9fa;
}
</style>
Here router-link components automatically generate anchor tags with proper href attributes for navigation. The to prop accepts strings or route objects with names, parameters, and queries. The active-class and exact-active-class props customize CSS classes for active routes, while the replace prop modifies browser history behavior instead of adding new entries.
Best Practice Note:
This is the same approach we use in CoreUI Vue applications for building consistent navigation systems, sidebar menus, and user interface components with proper accessibility. Always use router-link instead of regular anchor tags for internal navigation to maintain SPA behavior and leverage Vue Router’s active state management features.
