active class router link code example

Example 1: active link

# Foward slash is equal to homepage. For all others you use IN keyword.
<li 
  {% if '/' == request.path %}
  	class="nav-item active mr-3"
  {% else %}
  	class="nav-item mr-3"
  {% endif %}
>

<li 
  {% if 'about' in request.path %}
      class="nav-item active mr-3"
  {% else %}
      class="nav-item mr-3"
  {% endif %}
>

Example 2: active-class router-link

//when a route is active we can use this to add a certain style to the element:
<router-link to="/[route-name]" active-link="active'> <router-link>

//when the route is active, active-link will add the class active to the element
//you can define then a certain style for elements that contain the class active