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

Question

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

问题是在该路线中有另一个通往 mysitio.com/shop/categories 的组件，我想保持路线 mysite.com/shop 的 link 处于活动状态，但它不像那。

示例代码

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

我的标签页的网址是

米多米尼奥。com/shop/
midominio.com/shop/类别/

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

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

Answer 1

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

控制主动 class 喜欢 v-bind:active-class="$route.path !== '/shop/categories/' ? '(your active class)' : ''
像v-bind:exact="$route.path === '/shop/categories/'"

exact

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

How to keep the active link in a non-exact route with vue-router

vue.js

vue-router

vue-component