Solved: %2B change router link active class

Sure, let’s start with this article “Change router link active class in JavaScript”.

In the field of web development, particularly when dealing with single-page applications (SPAs), being able to accurately manipulate navigation and layout dynamically becomes quite crucial. One particular aspect of this is altering the Active Router Link class using JavaScript, whereby we control the class(es) applied to a link when it correlates to the route currently active in our application.

Now, about the resolution to this:

The problem arises when we want the router Link of the currently viewed page to be manifested differently, which might involve changing the color, font size etc. The solution lies in JavaScript’s ability to dynamically change CSS classes and the attributes therein. The code section will further elaborate on this.

Explaining the Code

To start, let’s take a look at the code and understand how it manipulates the active router link class using JavaScript.

For this task, we can use the methods provided by JavaScript and CSS:

  const links = document.querySelectorAll('.nav-link');
  links.forEach((link) => {
    link.addEventListener('click', function() {
      links.forEach((lnk) => lnk.classList.remove('active'));

This script selects all the elements with the class name ‘nav-link’, looping through them to add an event listener for the click event. If a link is clicked, the ‘active’ class is removed from all the links and then added to the clicked link.

Understanding JavaScript Essential Functions

This code snippet is central to understanding how we have manipulated the router link and involves key JavaScript concepts, which include*:

  • `document.querySelectorAll()`: This method returns all elements in the document that matches a specified CSS selectors(s), as a static NodeList object.
  • `element.addEventListener()`: The addEventListener() method attaches an event handler to the specified element.
  • `element.classList`: The classList property returns the class name(s) of an element, as a DOMTokenList object.
  • `domTokenList.remove() and domTokenList.add()`: These methods are used for adding and removing classes to/from an element.

Working with External Libraries

Apart from vanilla JavaScript, we can also use external libraries such as jQuery, Angular, Vue.js, and React.js to achieve similar functionality. These libraries often provide more simplified and powerful ways to manipulate the DOM, including dynamic class changes. Here we will delve into the other methods that could be implemented in Angular and Vue.js.

Angular provides a RouterLinkActive directive that we could use to style the active router link:

<a routerLink="/route-path" routerLinkActive="active"></a>

In Vue.js, we can use the tag with the attribute ‘active-class’:

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

These are modern approaches to manipulate the active router link class that embrace the benefits of using external JavaScript libraries.

In essence, understanding how to manipulate the DOM is an indispensable skill for any JavaScript developer. As such, mastering code snippets like the one above will allow developers to create dynamic, intuitive, and versatile user interfaces that enhance the overall user experience.

Related posts:

Leave a Comment