Vue-router: Default route and set activeClass for parent element

[tranduyhung]

activeClass option is only applied to its <a>, what I want to achieve is applying to its parent, in my case is the <li> which belong to a navigation bar/menu.

<ul class="nav nav-list">
    <li>
        <a v-link="{ path: '/', activeClass: 'active' }">Home</a>
    </li>
    <li>
        <a v-link="{ path: '/page-1', activeClass: 'active' }">Page 1</a>
    </li>
    <li>
        <a v-link="{ path: '/page-1', activeClass: 'active' }">Page 2</a>
    </li>
</ul>

I can workaround by apply v-link to the <li> but the Home menu item is always active because its route is "/".

<ul class="nav nav-list">
    <li v-link="{ path: '/', activeClass: 'active' }">
        <a v-link="{ path: '/' }">Home</a>
    </li>
    <li v-link="{ path: '/page-1', activeClass: 'active' }">
        <a v-link="{ path: '/page-1' }">Page 1</a>
    </li>
    <li v-link="{ path: '/products', activeClass: 'active' }">
        <a v-link="{ path: '/page-1' }">Page 2</a>
    </li>
</ul>

What I want is, when we first access the page, Home menu item is active (class "active" is added to its <li>), when I click other menu item like Page 1, its <li> is active and Home's <li> is not active.

I'm new to Vue and Vue Router so I'm not sure how to do this. I really appreciate if you have any suggestion! I hope there is something in Vue could help me achieve this easily, I really don't want to add some lines of jQuery to do it manually.

[tranduyhung]

I ended up with this

<ul class="nav nav-list">
    <li v-link="{ path: '/home', activeClass: 'active' }">
        <a v-link="{ path: '/home' }">Home</a>
    </li>
    <li v-link="{ path: '/page-1', activeClass: 'active' }">
        <a v-link="{ path: '/page-1' }">Page 1</a>
    </li>
    <li v-link="{ path: '/products', activeClass: 'active' }">
        <a v-link="{ path: '/page-1' }">Page 2</a>
    </li>
</ul>

    router.redirect({
        '*': '/home'
    })

It works but if there is any better solutions, please let me know. Thanks!

[jonagoldman]

+1 for a built in feature.

@tranduyhung: for the active class name better setting it as default (in your main.js or similar):

var router = new VueRouter({ linkActiveClass: 'active' })

[alexqhj]

+1 from me as well.

Having the active class on the parent <li> element is so common (e.g bootstrap) it really should be possible to do with a built-in feature.

[simondubois]

+1

[nicolasparada]

To apply the class to the / only exact: true.

<ul class="nav nav-list">
    <li>
        <a v-link="{ path: '/', activeClass: 'active', exact: true }">Home</a>
    </li>
    <li>
        <a v-link="{ path: '/page-1', activeClass: 'active' }">Page 1</a>
    </li>
    <li>
        <a v-link="{ path: '/page-2', activeClass: 'active' }">Page 2</a>
    </li>
</ul>

To apply the class to the parent... I don't know. Putting the v-link on the <li> I don't know if it break the middle click functionality. If don't I guess what you are doing it's ok.

[yyx990803]

This can now be done with v-link-active in 0.7.8.

[cnicodeme]

Awesome! Thank you :)

[bwangelme]

You has soloved my question. Awesome! Thank you :)

[paglias]

@yyx990803 is this feature gone in v2?

[vetalball]

@paglias
Yes, it has been replaced.
According to the documentation now you can use the following structure:

<router-link tag="li" to="/foo">
  <a>/foo</a>
</router-link>

[YavorK]

Here is THE Solution https://github.com/vuejs/vue-router/issues/762
The router assumes that if you are not using "exact" option you want
Categories to be ACTIVE when you are in Categories / Phones for example.
So when you are in /x/y, then / is active, and /x is active as well. "exact" option serves to disable this functionality.

[jdriesen]

@YavorK : Thanks mate.
Exactly what I was looking for :)

[leszekhanusz]

If you arrive on this page from google, note that the correct way to do this with a recent version (>3.1.0) is to use the v-slot API

[posva]

The name of the property change but it can still be set globally: https://router.vuejs.org/api/#linkactiveclass

the slot api could help with more advanced use cases!
Locking because this thread is very outdated