web-dev-qa-db-ja.com

パラメータ付きのリンクにnuxt-linkのアクティブクラスを設定するにはどうすればよいですか?

私のコードはこれです。
ただし、このコードでは、「/」は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>

どうすれば修正できますか?

私がexactを削除すると、すべてのページでアクティブクラスになります。


いくつかの回答ありがとうございます。

パラメータに関係なく「/」のときにアクティブ化する方法を見つけました。これがコードです。

<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;
      }
    }
  }
2
h.yuta

同じ問題がありました。このようにそれを回避しました:

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

方法:

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

しかし、これを行うネイティブの方法はあるのでしょうか...

0
FelixRe_