I'm working on the router in Vue js. I display the current link in Navbar by adding style for router-link-active and exact property for each <router-link>. It's work fine.

But now I'm trying to use class is-active (Bulma CSS) to do it. How can I do that ?.

Code

<a class="navbar-item is-active">
      <router-link to="/" exact>Home</router-link>
    </a>
    <a class="navbar-item">
        <router-link to="/about" exact>About</router-link>
    </a>
    <a class="navbar-item">
        <router-link to="/information" exact>Information</router-link>
    </a>

Any logical and solutions ? Please help me.

I'm working on the router in Vue js. I display the current link in Navbar by adding style for router-link-active and exact property for each <router-link>. It's work fine.

But now I'm trying to use class is-active (Bulma CSS) to do it. How can I do that ?.

Code

<a class="navbar-item is-active">
      <router-link to="/" exact>Home</router-link>
    </a>
    <a class="navbar-item">
        <router-link to="/about" exact>About</router-link>
    </a>
    <a class="navbar-item">
        <router-link to="/information" exact>Information</router-link>
    </a>

Any logical and solutions ? Please help me.

• javascript
• vue.js
• vuejs2
• vue-router

2 Answers 2

You can specify the name of the active class in vue-router constructor by using the linkActiveClass option.

import Router from 'vue-router'

export default new Router({
 linkActiveClass: 'is-active',
 mode: 'history',
 routes: [ ... ]
})

This will add is-active class to the active router-link instead of router-link-active. Read the docs here: https://router.vuejs/en/api/options.html#linkactiveclass

To add a class, simply put the class property on it:

<router-link class="is-active"></router-link>

Every ponent accepts that. It'll apply the class to the first element inside the ponent's template. In router-link's case, it's an <a> tag.

But keep in mind that router-link accepts a property active-class that you can use to put a css class to the currently active link, which sounds like what you're trying to do. So that's probably better, since Vue will detect which route you're currently at and put the class there for you.

Would look like this:

<router-link active-class="is-active"></router-link>

If you want to use this class on every active router-link, you can also set the linkActiveClass option in the router's constructor so you don't have to set active-class in every link.