Conditional class binding
You can conditionally bind a class based on the route using Vue.js class binding. We adjust the condition in the “:class” binding based on the specific requirements.
NOTE: All the other files will be same as in the previous example except the App.vue file.
Syntax:
<RouterLink to="/" class="{ 'active-link': $route.path === '/' }>Home</RouterLink>
.active-link {
// Your styles here
}
Example: The below JavaScript codes will help you implement the conditional class binding method to apply style in active links.
Javascript
<!-- App.vue file --><script>import { RouterView, RouterLink, useRouter, useRoute } from "vue-router";const router = useRouter();const route = useRoute();export default { name: '#app',};</script><template> <nav> <RouterLink to="/" :class="{ 'active-link': $route.path === '/' }"> Home </RouterLink> | <RouterLink to="/contact" :class="{ 'active-link': $route.path === '/contact' }"> Contact </RouterLink> | <RouterLink to="/about" :class="{ 'active-link': $route.path === '/about' }"> About </RouterLink> </nav> <RouterView /></template><style> nav { width: 100%; font-size: 24px; } nav a { display: inline-block; padding: 5px 10px; margin: 10px; } nav a.active-link { background-color: green; color: #fff; text-decoration: none; }</style> |
Javascript
// router.jsimport { createRouter, createWebHistory } from 'vue-router';import HomeView from './views/HomeView.vue';import ContactView from './views/ContactView.vue';import AboutView from './views/AboutView.vue';const router = () => createRouter({ history: createWebHistory(), routes: [ { path: '/', name: 'home', component: HomeView, }, { path: '/about', name: 'about', component: AboutView, }, { path: '/contact', name: 'contact', component: ContactView, }, ], });export default router; |
Javascript
// main.js fileconst { createApp } = require('vue');import App from './App.vue';import createRouter from './router';createApp(App).use(createRouter()).mount('#app'); |
Javascript
<!-- views -> AboutView.vue file --><template> <h1>This is About Page</h1></template><script> export default {};</script> |
Javascript
<!-- views -> ContactView.vue file --><template><h1>This is Contact Page</h1></template><script> export default {}</script> |
Javascript
<!-- views -> HomeView.vue file --><template><h1>This is Home Page</h1></template><script> export default {}</script> |
Output:
How to Style an Active Link in VueJS ?
In single-page applications effective navigation becomes crucial. In this article, we’ll explore how to style active links in Vue.js using the popular routing library, Vue-router.
Table of Content
- Using router-link-exact-active class
- Conditional class binding