Vue Router（Nuxt.js）で現在のページ（カレントページ）にclassを自動追加する方法

Vue Routerで現在のページ（カレントページ）にclassを自動追加する方法

グローバルナビゲーションなどで、現在のページだけクラスを付けた時があると思います。
Vue Routerでは比較的簡単に実装できます。

      <nav>
        <ul class="gnav">
          <li><router-link to="/" active-class="active-list" exact>HOME</router-link></li>
          <li><router-link to="/drink" active-class="active-list">DRINK</router-link></li>
          <li><router-link to="/info" active-class="active-list">INFO</router-link></li>
          <li><router-link to="/contact" active-class="active-list">CONTACT</router-link></li>
        </ul>
      </nav>

上記のようにactive-classと言う属性を設定することで、そのディレクトリ内の時だけクラスを付けることができます。

しかし、これだと包含するディレクトリにもクラスがついてしまいます。（上記の例では、下位のディレクトリに移動してもトップページにもクラスがつく）

包含では無く完全に一致した時だけクラスを付けたい時はexactを記述します。
そうすることにより、下位のディレクトリに移動した時には、クラスが外れます。（上記の例ではトップページにexactを記述）