みかづきブログ・カスタム

基本的にはちょちょいのほいです。

Nuxt.jsでnuxt-linkを使ってハッシュを変更した時にhashchangeが発火しない 🔥

f:id:kimizuka:20200811145835p:plain

<nuxt-link to="#hash">hashchange</nuxt-link>

とか、

<nuxt-link to="{ hash: '#hash' }">hashchange</nuxt-link>

というリンクをクリックしてhashを変化させた時、

window.addEventListener('hashchange', () => {
  console.log('hashchange!');
});

と、設定したハッシュチェンジイベントが発火せずにとても困っていました。

※ nuxt 2.12.2のspa、historyモードで確認

手っ取り早い解決策として、

<a href="#hash">hashchange</a>

と、aタグに置き換えたら無事に動作するようになりました。

Next.jsでも同じことが起こったので、そういう仕様なのかもしれないです。
そもそも、内部的にはpushStateを使ってそうですし。

blog.kimizuka.org