[Nuxt.js] アンカーリンク遷移動作しない場合対処方法

2 min read

状況

  • ページ内アンカーリンクがある - #foo, #bar
  • アンカーリンクをクリックするとページ内遷移ではなく、ルートページに移動してしまう

原因

nuxt.config.jsに設定されているrouter.baseが原因だった(未設定でも下記のようなデフォルト値が入る)

// nuxt.config.js
export default {
  router: {
    base: "/",
  },
};

これにより、<base href="/"><head>内に追加されパスが変わってしまっているようであった。

vue-meta

Nuxt.js においては、vue-router との兼ね合いもあり、head()(vue-meta)経由の<base>の書き換えはできない模様。

(書き換えられたとして、そちら側で問題が起きそう)

対応方法

そのままでは、先述のように<base href="/">に引っ張られてしまうため、アンカー要素に対して処理を施した。

対象のリンクに対して下記のようなイベントを付与。

element.addEventListener("click", (e) => {
  e.preventDefault();
  e.stopPropagation();

  setTimeout(() => {
    const target = document.querySelector(element.hash);
    if (target) {
      window.scrollTo({ left: 0, top: target.offsetTop, behavior: "smooth" });
    }
  }, 0);
});

アンカー要素のイベントを止めて、アンカー対象の要素の位置までスクロールさせるといった処理である。
Nuxt.js 側の処理とかち合うケースがあったため、setTimeoutでタイミングをずらしている。

このページをシェアする

Related Articles

[ESLint] 特定のimportにおいてパスの末尾スラッシュを禁止する方法

背景 / やりたいこと / @typescript-eslint/no-restricted-imports を利用した / 余談(末尾のスラッシュ自体を禁止にする)

`<input type="range">`のstepを可変にする方法

仕様 / 完成デモ / 実装 / 参考

[Vite] CSSだけをビルドする方法

背景 / Vite をインストール / 仕様

CSS in JSとは何か

想定読者 / そもそも JS フレームワーク(React、Vue.js)を採用する理由とは何か / 「命令的 UI」 と 「宣言的 UI」 / 「命令的 UI」 VS 「宣言的 UI」 / CSS in JS とは / CSS in JS ライブラリ / Emotion の使い方 / 利用するメリット / 利用するデメリット / 関連 / Footnotes

[CSS in JS] 外部のリセットCSSを使う方法

目的 / 課題 / おまけ