[Vuejs]-Vue 3 Overview & Detail view same router-link should be active

by

0👍

Okey i’ve found a solution here:
https://forum.vuejs.org/t/router-active-class-on-submenu-parent/7027

<router-link to="/travels" custom v-slot="{ href, navigate, isActive, isExactActive }">
          <li :class="{ 'uk-active active': isActive || isExactActive || subIsActive('/travels') }">
            <a :href="href" @click="navigate"><span>Travels</span></a>
          </li>
        </router-link>

And in the method:

subIsActive(input) {
      const paths = Array.isArray(input) ? input : [input]
      return paths.some(path => {
        return this.$route.path.indexOf(path) === 0 // current path starts with this path string
      })
    }

Now every route that starts with /travels adds the active classes to the router-link item.

Leave a comment