[Vuejs]-How do I activate a sub menu route from a main menu route – vue-router

by

0👍

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.

0👍

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>

Leave a comment