Vue.js 2 Web Development Projects

Active class

A router link gets the active class when the route it is associated with is currently active. By default, the component gets the router-link-active CSS class, so you can change its visuals accordingly:

1. In our NavMenu.vue component, declare some scoped style to add a bottom border to the active link using Stylus:

      <style lang="stylus" scoped>      @import '../style/imports';      .router-link-active {        border-bottom-color: $primary-color;      }      </style>

We include the $primary-color variable with the @import '../style/imports'; statement, which imports the imports.styl file containing the Stylus variables.

If you try the app now, you will find that something weird is happening with our menu. If you go to the Home page, it is working as expected: ...