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

【问题标题】：How to keep the active link in a non-exact route with vue-router如何使用 vue-router 将活动链接保持在非精确路由中
【发布时间】：2019-03-16 00:43:32
【问题描述】：

我有一个带有 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/

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

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

【问题讨论】：

不是因为你使用的是exact 属性吗？
我曾考虑过，但如果我不使用exact，它总是标记我选项卡的第一个选项，因为有两个链接1.mydomain.com/shop/ 2.mydomain.com/商店/类别/
不是一个好的解决方案，但可以通过控制像v-bind:active-class="$route.path !== '/shop/categories/' ? '(your active class)' : ''这样的活动类来解决
或v-bind:exact="$route.path === '/shop/categories/'"
@JacobGoh 您可能会被鼓励添加答案

标签： vue.js vue-component vue-router

【解决方案1】：

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

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

【讨论】：