Skip to content

Make the first child route as the active class whenever the sub-route path is an empty path #1191

Closed
@KakarN

Description

@KakarN

I have a Main Navigation nav bar with some links. In the home page, i.e., in the root path ('/'), I have nested (child) routes.

Route configration:

const routes = [
    {path: '/', component: HomeMainContent, children: [
            {path: '', component: MovieList},
            {path: 'in-theaters', component: MovieList},
            {path: 'coming-soon', component: ComingSoonList},
            {path: 'trailers', component: TrailerList},
    ]},
    {path: '/about', component: About},
    {path: '/contact',component: Contact},
];

So when the root path ('/') is active, its child router root path ('') is activated.

The template of child component router is in this way:

<template>
    <div id="homeSubMenuWrapper">
        <ul id="subMenuList">
            <li v-for="menu in menuList">
                <router-link class="menuItem" :to="menu.path">{{menu.name}}</router-link>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                menuList: [
                    {name: 'IN THEATER', path: '/in-theaters'},
                    {name: 'COMING SOON', path: '/coming-soon'},
                    {name: 'TRAILERS', path: '/trailers'},
                ]
            }
        }
    }
</script>

Since, both the path ('') and ('in-theaters') have the same component, I would like to make the router-link of path ('in-theaters') to have the class of router-link-active whenever the child path ('') of its parent path ('/') is active. How can I do that?

Meaning the first child route ('in-theaters') should have the active class whenever the sub-route path is an empty path ('').

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions