New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Default route and set activeClass for parent element #255

Closed
tranduyhung opened this Issue Nov 26, 2015 · 12 comments

Comments

Projects
None yet
@tranduyhung

tranduyhung commented Nov 26, 2015

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 tranduyhung changed the title from Default router and set activeClass for parent element to Default route and set activeClass for parent element Nov 26, 2015

@tranduyhung

This comment has been minimized.

Show comment
Hide comment
@tranduyhung

tranduyhung Nov 26, 2015

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!

tranduyhung commented Nov 26, 2015

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

This comment has been minimized.

Show comment
Hide comment
@jonagoldman

jonagoldman Nov 28, 2015

+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' })

jonagoldman commented Nov 28, 2015

+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

This comment has been minimized.

Show comment
Hide comment
@alexqhj

alexqhj Dec 13, 2015

+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.

alexqhj commented Dec 13, 2015

+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

This comment has been minimized.

Show comment
Hide comment
@simondubois

simondubois commented Jan 3, 2016

+1

@nicolasparada

This comment has been minimized.

Show comment
Hide comment
@nicolasparada

nicolasparada Jan 3, 2016

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.

nicolasparada commented Jan 3, 2016

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 comment has been minimized.

Show comment
Hide comment
@yyx990803

yyx990803 Jan 11, 2016

Member

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

Member

yyx990803 commented Jan 11, 2016

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

@yyx990803 yyx990803 closed this Jan 11, 2016

@cnicodeme

This comment has been minimized.

Show comment
Hide comment
@cnicodeme

cnicodeme Jan 25, 2016

Awesome! Thank you :)

cnicodeme commented Jan 25, 2016

Awesome! Thank you :)

@bwangelme

This comment has been minimized.

Show comment
Hide comment
@bwangelme

bwangelme May 11, 2016

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

bwangelme commented May 11, 2016

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

@paglias

This comment has been minimized.

Show comment
Hide comment
@paglias

paglias Oct 29, 2016

@yyx990803 is this feature gone in v2?

paglias commented Oct 29, 2016

@yyx990803 is this feature gone in v2?

@vetalball

This comment has been minimized.

Show comment
Hide comment
@vetalball

vetalball Nov 22, 2016

@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>

vetalball commented Nov 22, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@YavorK

YavorK Feb 3, 2017

Here is THE Solution #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.

YavorK commented Feb 3, 2017

Here is THE Solution #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

This comment has been minimized.

Show comment
Hide comment
@jdriesen

jdriesen Feb 10, 2017

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

jdriesen commented Feb 10, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment