前提・実現したいこと
Vue.jsでWebアプリを作成しています。
VuetifyとVue Routerを使用しています。
発生している問題
フッターにv-btn
で「Home」「About」「Privacy」などのリンクをto="/"
で設置しているのですが、開いてるページとそのリンクが一致しているときに強調して表示されてしまいます。
例えば/about
のページにいる時、フッターの「About」がホバーしたときのようになります。
該当のソースコード
javascript
1~~~ 2<v-btn 3 v-for="link in footerlinks" 4 :to="link.to" 5 text 6 rounded 7 class="my-2" 8> 9 {{ link.name }} 10</v-btn> 11 12~~~ 13<script> 14 export default { 15 data() { 16 return { 17 footerlinks: [ 18 { to:"/", name:"Home" }, 19 { to:"/about", name:"About" }, 20 { to:"/privacy", name:"Privacy" }, 21 ~~~ 22 ] 23 } 24 } 25~~~ 26 } 27</script> 28
試したこと
2年前の記事にactive-class
を何も指定せずに追加すれば強調されないとの情報があったので試してみましたが効きませんでした。
javascript
1<v-btn 2 v-for="link in footerlinks" 3 :to="link.to" 4 text 5 rounded 6 7 active-class 8 9 class="my-2" 10> 11 {{ link.name }} 12</v-btn>
to
ではなくhref
にしたときは強調されなくなりましたが、SPAの意味がなくなってしまいました。
補足情報(FW/ツールのバージョンなど)
vue: 2.6.10
vue-router: 3.0.3
vuetify: 2.0.0
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/08/14 11:34