Question

我的路线下方

import Cart from './Cart.vue'
import ProductList from './ProductList.vue'
import ViewProduct from './ViewProduct.vue'

export const routes = [
    {
        path: '/',
        name: 'index',
        component: ProductList,
    },
    {
        path: '/cart',
        name: 'cart',
        alias: '/shopping-cart',
        component: Cart,
    },
    {
        path: '/product/:product_id/view',
        redirect: { name: 'view_product' },
    },
    {
        path: '/product/:product_id',
        props: true,
        name: 'view_product',
        component: ViewProduct,
    },
    {
        path: '*',
        component: {
            template: '<h1>Page not found</h1>',
        },
    },
];

您会看到我的路线或路径/cart的别名为/shopping-cart。

下面是我在App.vue中定义并应用了bootstrap@3样式的路由器链接

<ul class="nav navbar-nav">
    <router-link 
        :to="{ 
            name: 'index' 
        }" 
        tag="li" 
        active-class="active" 
        exact>
        <a>Products</a>
    </router-link>
    <router-link 
        :to="{ 
            name: 'cart', 
        }" 
        tag="li" 
        active-class="active" 
        exact>
        <a>Cart</a>
    </router-link>
</ul>

当我导航到/cart时，您可以看到活动类已被应用，如下面的屏幕截图所示

但是当我导航到别名/shopping-cart时，您可以在下面看到未应用活动类

该怎么做，以便当我导航到别名时，还会应用链接的活动类？

我尝试更改此内容

<router-link 
    :to="{ 
        name: 'cart', 
    }" 
    tag="li" 
    active-class="active" 
    exact>
    <a>Cart</a>
</router-link>

对此

<router-link 
    :to="{ 
        name: 'cart',
        alias: 'shopping-cart',
    }" 
    tag="li" 
    active-class="active" 
    exact>
    <a>Cart</a>
</router-link>

但无济于事。

谢谢。

Answer 1

与此相关的问题仍在github中公开。参考：https://github.com/vuejs/vue-router/issues/419 您只需要将路径重命名为/shopping-cart即可，如果要应用active-class，则无需使用别名。

使用别名时未添加活动类

1 个答案: