vue.js - 如何使用 vue-router 将事件链接保持在非精确路由中

Question

我有一个带有 Vue 和 VueRouter 的应用程序，在我的根组件中我有一个选项卡面板，每个选项卡都是一个路由器链接，当我单击每个路由器链接时它会将我带到特定的路线，直到那时一切都很好，例如路线 misitio.com/shop/ 激活这条路线的链接

问题是在该 route 有另一个组件通向 mysitio.com/shop/categories，我想留下路线 mysite.com/shop 的链接 active 但它不是那样的。

示例代码

  <div class="col-md-12">
            <ul class="nav nav-tabs md-tabs nav-justified default-color-dark" role="tablist">
                <li class="nav-item ">
                    <router-link :to="{ name: 'shop'}" exact
                        class="nav-link  text-white" 
                        data-toggle="tab"
                        role="tab">
                        <i class="fa fa-table"></i>&nbsp;&nbsp; SHOP
                    </router-link>
                </li>
                <li class="nav-item">
                    <router-link :to="{ name: 'other'}"  exact
                    class="nav-link  text-white" 
                        data-toggle="tab"
                        role="tab" >
                        <i class="fa fa-heart"></i>&nbsp;&nbsp; OTHER
                    </router-link>
                </li>
            </ul>
            <div class="tab-content card">
                <transition name="fade" mode="out-in">
                    <router-view></router-view>
                </transition>
            </div>
        </div>

我的标签的 url 是

1. midominio.com/shop/
2. midominio.com/shop/categories/

如果我不使用exact，当我选择第二个选项时，第一个也会标记我

我怎样才能实现这种行为？我想到了一个正则表达式也许可以激活链接

Answer 1

可能不是最好的解决方案，但这些是可以解决您的问题的方法:

1. 控制事件类，如 v-bind:active-class="$route.path !== '/商店/类别/' ? '(你的活跃类(class))' : ''

2. 像 v-bind:exact="$route.path === 一样控制 exact 属性 '/shop/categories/'"