[Vuejs]-Two navbars generated from vue-router, active-class highlighting only one link

by

0👍

✅

You could consider refactoring your code and using scss to change the style of your router links based on the viewport size. That way you only need to have one set of router links and the active one will highlight correctly

for example

.my-menu-style {
  // burger style menu here
  @include media-min($breakpoint-medium) { 
    //menu style normal menu
  }
  

}

Also, you are using v-show which just hides the code in the DOM, you might find that if you use v-if to toggle between burger menu and normal menu it solves your problem as this actually adds abd removes the html from the DOM. You will then only have one set of router links in your html at one time

Leave a comment