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;
      }
    }
  }
vue.jsnuxt
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_