web-dev-qa-db-fra.com

Comment définir la classe active de nuxt-link pour les liens avec des paramètres?

Mon code est le suivant.
Cependant, dans ce code, "/" ne devient pas de classe active lorsque domain.com/?standalone=true.

<nuxt-link to="/" class="navBotton" exact-active-class="active" ><span>Home</span>
</nuxt-link>
<nuxt-link to="/post" class="navBotton" active-class="active" ><span>Post</span>
</nuxt-link>
<nuxt-link to="/about" class="navBotton" active-class="active" ><span>About</span>
</nuxt-link>

Comment je le répare?

Lorsque je supprime exactement, il devient classe active sur toutes les pages.

Merci pour quelques réponses.

J'ai trouvé un moyen d'activer lorsque "/" quel que soit le paramètre. Voici le code.

<nuxt-link
        to="/"
        class="navBotton home"
        :class="{'active': isRouteActive }"
        exact-active-class="active"
      >

computed: {
    isRouteActive: function() {
      if (this.$nuxt.$route.path=="/") {
        return true;
      } else {
        return false;
      }
    }
  }
vue.jsnuxt
2
h.yuta

J'ai eu le même problème. Contourné comme ça:

<b-link :class="{'nuxt-link-active': isRouteActive(id) }" :to="id + '?someParams=true'">

Méthode:

methods: {
    isRouteActive(id) {
      if (this.$route.path.includes(id)) {
        return true
      } else {
        return false
      }
    },
    log() {
      console.log(this.categories)
    }
}

Cependant, je me demande s'il y a une façon native de le faire ...

0
FelixRe_