在使用别名时未添加活动类。

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，则必须去掉别名。