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

Question

I have an application with Vue and VueRouter, in my root component I have a tab panel, each tab is a router-link, when I click on each routerlink it takes me to the specific route, until then everything is fine, for example the route misitio.com/shop/ activate the link for this route

the problem is when within that route there is another component that leads to mysitio.com/shop/categories, I would like to leave the link of the route mysite.com/shop active but it is not like that.

Example Code

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

The urls of my tabs are

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

if I do not use exact, when I select the second option the first one also marks me

How can I achieve this behavior? I thought of a regular expression maybe to activate the link

I had thought about it but, if I do not use exact, it always marks the first option of my tab since there are two links 1. mydomain.com/shop/ 2. mydomain.com/shop/categories/ — DarkFenix
not a good solution, but it could be solve by controlling the active class like v-bind:active-class="$route.path !== '/shop/categories/' ? '(your active class)' : '' — Jacob Goh

Jacob Goh Jacob Goh · Accepted Answer · 2018-10-13T14:38:21

Probably not the best solutions, but these are the ways that your problem could be solved:

controlling the active class like v-bind:active-class="$route.path !== '/shop/categories/' ? '(your active class)' : ''
control the exact prop like v-bind:exact="$route.path === '/shop/categories/'"

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

1 Answers