IonItem router-link-active

Ionic Framework Ionic Vue
1

I’ve been trying for over an hour without any progress. What am I missing when trying to get an active class on a navigation menu item?

<ion-item button :router-link="item.link" router-link-active="active">

Reproduction: https://codesandbox.io/s/quizzical-shamir-vzf2u

2

So ion-item doesn’t have a router-link-active prop on it. Router-link-active is only if you use vue-router’s router-link component directly. I’ve adapted this though to get the same effect.

Basically, you compare the routes you are linking to with the current path of the app.

    const route = useRoute();
    const isActive = (path: string) => path === route.fullPath;

Then set the class on the element.

          <ion-item
            v-for="(item, i) in items" :key="i"
            button
            :router-link="item.link"
            :class="{ active: isActive(item.link) }"
          >
2 Likes
3

That’s excellent. Thanks for your help.