VuetifyのBunttonがvue-routerのactive-classで強調表示されるのを防ぐには？

Question

前提・実現したいこと

Vue.jsでWebアプリを作成しています。
VuetifyとVue Routerを使用しています。

発生している問題

フッターにv-btnで「Home」「About」「Privacy」などのリンクをto="/"で設置しているのですが、開いてるページとそのリンクが一致しているときに強調して表示されてしまいます。
例えば/aboutのページにいる時、フッターの「About」がホバーしたときのようになります。

該当のソースコード

~~~
<v-btn
 v-for="link in footerlinks"
 :to="link.to"
 text
 rounded
 class="my-2"
>
 {{ link.name }}
</v-btn>

~~~
<script>
 export default {
  data() {
   return {
    footerlinks: [
     { to:"/", name:"Home" },
     { to:"/about", name:"About" },
     { to:"/privacy", name:"Privacy" },
     ~~~
    ]
   }
  }
~~~
 }
</script>

試したこと

2年前の記事にactive-classを何も指定せずに追加すれば強調されないとの情報があったので試してみましたが効きませんでした。

<v-btn
 v-for="link in footerlinks"
 :to="link.to"
 text
 rounded

 active-class

 class="my-2"
>
 {{ link.name }}
</v-btn>

toではなくhrefにしたときは強調されなくなりましたが、SPAの意味がなくなってしまいました。

補足情報（FW/ツールのバージョンなど）

vue: 2.6.10
vue-router: 3.0.3
vuetify: 2.0.0

よろしくお願いいたします。

Answer 1

:to="link.to"でルーターに設定するのではなく、@click="関数名(link)"として引数にlinkを渡し、methodsに

関数名(link) {
  this.$router.push({ path: link.to }) 
}

を宣言して、関数でページ遷移させてみてはどうでしょうか？
ルーターではなくなるのでactive-classは適用されなくなると思います。

・プログラムによるナビゲーション
https://router.vuejs.org/ja/guide/essentials/navigation.html

Comments

[Erudne]

無事解決できました！ありがとうございます