Question

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

问题在于，当该路由内有另一个组件引向mysitio.com/shop/categories时，我想保持路由mysite.com/shop的链接处于活动状态，但事实并非如此。

示例代码

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

我的标签的网址是

midominio.com/shop /
midominio.com/shop/categories /

如果我不使用完全匹配，则当我选择第二个选项时，第一个也会标记我

如何实现此行为？我想到了一个正则表达式，也许可以激活链接

Answer 1

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

控制活动类，例如v-bind:active-class="$route.path !== '/shop/categories/' ? '(your active class)' : ''
像exact一样控制v-bind:exact="$route.path === '/shop/categories/'"道具

如何使用vue-router将活动链接保持在非精确路由中

1 个答案: