「新型コロナウイルス感染症が心配なときに」のページでボタンをクリックすると、サイドメニューのリンクの色がアクティブではなくなる

[munierujp]

起こっている問題 / The Problem

• 「新型コロナウイルス感染症が心配なときに」のページで、「かかりつけ医がいて症状のある方」「かかりつけ医がいない症状のある方」「軽い症状があり不安のある方」のいずれかのボタンをクリックすると、サイドメニューの「新型コロナウイルス感染症が心配なときに」の色がアクティブ（#008830）ではなくなる
  • これらのボタンはページ内リンクになっているので、クリックするとURLにハッシュ（それぞれ#sydr、#sy、#anx）がつく
  • サイドメニューで使用しているMenuList.vueコンポーネントでは、CSSで.nuxt-link-exact-activeに対して色をつけている
    • このクラスは、NuxtによってURLが現在のURLと完全一致するリンクに対して付与されている
      • cf. https://ja.nuxtjs.org/api/configuration-router/#linkexactactiveclass
  • ハッシュがついたことによりURLが一致しなくなった結果、リンクがアクティブではなくなる

スクリーンショット / Screenshot

GIF

期待する見せ方・挙動 / Expected Behavior

• 「新型コロナウイルス感染症が心配なときに」のページでボタンをクリックしても、サイドメニューの「新型コロナウイルス感染症が心配なときに」の色がアクティブなままになっている

起こっている問題の再現手段 / Steps to Reproduce

1. 「新型コロナウイルス感染症が心配なときに」のページを開く
2. 「かかりつけ医がいて症状のある方」「かかりつけ医がいない症状のある方」「軽い症状があり不安のある方」のいずれかのボタンをクリックする
3. サイドメニューの 「新型コロナウイルス感染症が心配なときに」の色がアクティブではなくなる

動作環境・ブラウザ / Environment

• macOS Catalina 10.15.4
• Google Chrome バージョン: 80.0.3987.163（Official Build） （64 ビット）

原因が環境依存ではないので、他の環境においても再現するものと思われます。

解決策 / How to resolve

いくつかの解決策が考えられます。

A: リンクのアクティブ判定を修正

https://stopcovid19.metro.tokyo.lg.jp/flow/#sydrとhttps://stopcovid19.metro.tokyo.lg.jp/flow/#syのようにURLのハッシュが異なっていても、パスさえ一致すれば同一のページとして扱うようにリンクのアクティブ判定を修正します。
Vue Router自体に、この問題についてのイシューおよびRFCがあがっています。

• Option to match exactPath that ignores query parameters and/or hashes · Issue #2040 · vuejs/vue-router
• rfcs/0028-router-active-link.md at master · vuejs/rfcs

しかしながら、これがVue Routerに取り込まれるのには時間を要すると思われます。
ワークアラウンドとしては、リンクがアクティブかどうかの判定処理を独自に実装する手法があります。

• vue-router 現在のパスによってスタイルを変更する

完全なURL（例：https://stopcovid19.metro.tokyo.lg.jp/flow/#sydr）ではなくURLからハッシュを除いたもの（例：https://stopcovid19.metro.tokyo.lg.jp/flow/）の一致で判定すればいいので、location.origin + location.pathnameを現在のURLとして使用すればよさそうです。

B: ページ内リンクにアンカーを使用しない

ページ内リンクをアンカーではなく、特定の要素（コンポーネント）の位置にスクロールすることで実現します。
ボタンをクリックしてもURLにハッシュがつかないため、リンクはアクティブなままになります。

[mcdmaster]

やってみますね。ページ内リンク（アンカー）のせいで、お作法が変わってしまったと思われます

[munierujp]

@mcdmaster おお、すでにvue-scrolltoを使って実装されていたのですね。変更内容が軽微で済みそうでよかったです。