Как сохранить активную ссылку в неточном маршруте с помощью vue-router

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>

URL моих вкладок:

1. midominio.com / shop /
2. midominio.com / shop / Categories /

если я не использую точный, когда я выбираю второй вариант, первый также отмечает меня

Как мне добиться этого поведения?Я подумал о регулярном выражении, может быть, чтобы активировать ссылку

Answer 1

Возможно, не самые лучшие решения, но вот способы, с помощью которых ваша проблема может быть решена:

1. управление активным классом, например v-bind:active-class="$route.path !== '/shop/categories/' ? '(your active class)' : ''

2. управление exact реквизитом v-bind:exact="$route.path === '/shop/categories/'"