Question

大家好我需要帮助从主菜单路由激活子菜单路由 - vue-router。我的app.js中有以下代码用于路由。当单击主菜单导航链接（事务）时，子对象具有我想要突出显示的子路径。在我的浏览器URL中，我看到http://localhost:3000/transactions/transaction_history告诉我它会到达我想要的目的地，但我不知道从主导航中获取子路由是否活跃？任何帮助都会很棒。

app.js

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

在我的navigation.vue中我有

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

在我的transactions.vue模板中，我有这个链接，它是子菜单的第一个孩子

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

单击主导航时我想要的示例。这是子菜单的第一个孩子。

Answer 1

乍一看，您的问题似乎是您已经忘记了子路线从父母那里继承了路径。您只需要为父路径指定/transactions，为子路径指定transaction_history。此外，您的父路径没有明确地从您的子路径的路径根/开始。那令人困惑。

我也不确定您为什么要在路由器链接上指定to属性。这些似乎是不必要的，exact属性也是如此。您正在混淆我认为您不需要的许多功能。

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>

如何从主菜单路由 - vue-router激活子菜单路由

2 个答案: