CODEWITHSUNDEEP
vue.jsvuejs2vuejs3
Dave
Dave

Reputation: 2018

Nav items having active class even when I change

I am facing this issue with navigation. Whenever I switch the tabs, the route with "" keeps being active all the time no matter what. I tried using router-exact css, but whenever I go in nested route then the menu nav stops having active class. I believe this is because the path is ""

Router:

    {
        path: "",
        name: "Item1",
        component: Item
   }

Component

      <router-link :to="{ name: 'Item1' }" >Item1</router-link>
      <router-link :to="{ name: 'Item2' }" >Item2</router-link>
      <router-link :to="{ name: 'Item3' }" >Item3</router-link>

The lighter color is active class How it looks

Upvotes: 1

Views: 242

Answers (1)

Marc
Marc

Reputation: 5455

Set path to '/' and add exact or exact-path to links: <router-link exact :to="{...}">

Here is the official documentation: https://router.vuejs.org/api/#exact

Upvotes: 1

Related Questions