こんにちは、フルスタックエンジニアのryuです。
今回の記事では、Nuxt.jsでURLの最後に”/”スラッシュを自動で付ける方法を解説します。URLの末尾のスラッシュをトレイリングスラッシュと言います。トレイリングスラッシュを自動で付与するには、Nuxt.jsの設定を変更するだけです。
Nuxt.jsでURLの最後に”/”スラッシュを自動で付ける方法解説¶
どうやって文末に”/”スラッシュを付けるの？
今回の記事では、Nuxt.jsでURLの最後に”/”スラッシュを自動で付ける方法解説します。
トレイリングスラッシュとは、URLの文末に付くスラッシュのことです。
Nuxt.jsでトレイリングスラッシュを付ける方法は以下の通りです。
- トレイリングスラッシュを有効にする
- スラッシュ無しでアクセスした場合リダイレクトする
では、詳しく解説します。
Nuxt.jsの設定ファイルで有効にする¶
まず、Nuxt.jsの設定ファイルでトレイリングスラッシュを有効にします。Nuxt.jsの設定ファイルは、nuxt.config.jsです。以下のように設定を加えましょう。
export default {
・・・
router: {
trailingSlash: true
}
}
この設定値は、v2.10から利用できるようになりました。”true”もしくは”false”のBoolean型で設定します。
trueに設定した場合、URLの末尾にスラッシュが追加されるようになります。
詳しくは、こちらのドキュメントを参考にしてください。
[Nuxt – The Intuitive Vue Framework (nuxtjs.org)](https://nuxtjs.org/ja/)
スラッシュ無しにアクセスした場合は、ページが表示されなくなるので、リダイレクトの設定も忘れずに行いましょう。
スラッシュなしでアクセスされた場合にリダイレクトを設定する¶
先ほど、トレイリングスラッシュを有効にしました。有効にすると、URLの文末に”/”スラッシュが付きます。しかし、スラッシュが無いURLにアクセスすると、エラーが表示されます。
スラッシュが無しのURLにアクセスされた場合、スラッシュ有りのURLにリダイレクトする設定を追加しましょう。
リダイレクトモジュールのインストール¶
まず、リダイレクトするためのモジュールをインストールします。
npm install @nuxtjs/redirect-module
モジュールを読み込む¶
モジュールのインストールが完了したら、nuxt.config.jsファイルにモジュールを読み込みます。
export default {
・・・
modules: [
'@nuxtjs/redirect-module'
]
}
リダイレクトの条件を指定する¶
先ほどと同じ設定ファイルにリダイレクトの条件を指定します。正規表現を用いて、ステータスコード301でリダイレクトを実施します。
export default {
・・・
redirect: [
{
from: '^(\\/[^\\?]*[^\\/])(\\?.*)?$',
to: '$1/$2',
statusCode: 301
}
],
}
これで完了です。“https://\~.com”にアクセスした場合、”https://\~.com/”にリダイレクトされます。
リダイレクトモジュールの詳しい使い方は、こちらを参考にしてください。
nuxt-community/redirect-module: No more cumbersome redirects! (github.com)
Nuxt.jsでURLの最後に”/”スラッシュを自動で付ける方法まとめ¶
最後にまとめです。今回の記事では、Nuxt.jsでURLの最後に”/”スラッシュを自動で付ける方法を解説しました。まとめると以下のようになります。
- トレイリングスラッシュを有効にする
- スラッシュ無しでアクセスした場合リダイレクトする
Nuxt.jsでSEO対策などを実施するときに使う技術なので覚えておきましょう。
当ブログでは、Nuxt.jsやVue.jsに関する記事を発信しています。興味ある方は是非ご覧ください。
vue.js | インフラエンジニアになりたくて。 (engineer-ninaritai.com)
さらに詳しく勉強したい方はこちらの参考書がオススメです。
