IonItem router-link-active

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="" router-link-active="active">


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.

            v-for="(item, i) in items" :key="i"
            :class="{ active: isActive( }"

1 Like

That’s excellent. Thanks for your help.