how do I activate a sub menu route from a main menu route - vue-router

Question

Hi all I need some help with activating a sub menu route from a main menu route - vue-router. I have the following code in my app.js for routing. The children object has a sub-route that I want highlighted when the main menu nav link (transactions) is clicked. In my browser URL I see http://localhost:3000/transactions/transaction_history which tells me that it is going to the destination I want but I have no clue to get the sub-route active from the main nav? Any help will be great.

app.js

const routes = [
    {
        name: 'transactions',
        path: 'transactions/transaction_history',
        component: transactions,
        children: [
            {
                name: 'transaction-history',
                path: '/transactions/transaction_history',
                component: transaction_history
            }
        ]
    }
]

In my navigation.vue I have

<li class="u-nav__tab-item pull-left">
    <router-link v-bind:class="{ 'u-nav__tab-item--active' : $route.name === 'transactions' }" :to="{ name: 'transactions', path: '/transactions' }" exact>Transactions
        <div class="u-nav__dropdown-arrow pull-right"></div>
    </router-link>
</li>

And in my transactions.vue template I have this link which is the first-child of the sub menu

<li class="o-pf-list__item o-pf-list__item--border o-pf-list__item--line-height" :class="{ 'u-nav__tab-item--active-border-left' : $route.name === 'transaction-history' }">
    <router-link v-bind:class="{ 'u-nav__tab-item--active' : $route.name === 'transaction-history' }" :to="{ name: 'transaction-history', path: '/transactions/transaction_history' }" exact>Transaction History</router-link>
</li>

Example of what I want when the main nav is clicked. This is the sub menu first child.

Answer 1

At first glance, your problem seems to be that you've forgotten that child routes inherit the path from their parent. You only need to specify /transactions for the parent path, and transaction_history for the child path. Also, your parent path doesn't explicitly start at the path root / while your child route does. That's confusing.

I'm also not sure why you're specifying the to attribute on your router links. Those seem unnecessary, as does the exact attribute. You're conflating a lot of features that I think you don't need here.

Answer 2

const routes = [
    {
        name: 'transactions',
        path: '/transactions',
        component: transactions,
        children: [
            {
                name: 'transaction-history',
                path: '/transaction_history',
                component: transaction_history
            }
        ]
    }
]


<li class="u-nav__tab-item pull-left">
    <router-link v-bind:class="{ 'u-nav__tab-item--active' : $route.name === 'transactions' }" :to="{ path: '/transactions' }">Transactions
        <div class="u-nav__dropdown-arrow pull-right"></div>
    </router-link>
</li>



<li class="o-pf-list__item o-pf-list__item--border o-pf-list__item--line-height" :class="{ 'u-nav__tab-item--active-border-left' : $route.name === 'transaction-history' }">
    <router-link v-bind:class="{ 'u-nav__tab-item--active' : $route.name === 'transaction-history' }" :to="{ path: '/transactions/transaction_history' }">Transaction History</router-link>
</li>