Nuxt3 URLをスラッシュ付きに統一する

Nuxt3のデフォルトURLは最後尾にスラッシュが付きませんが、設定を行うことでスラッシュ付きに統一することができます。

1. 最後尾にスラッシュを付与

nuxt.config.tsに下記コードを追加します。

project-folder/nuxt.config.ts

export default defineNuxtConfig({
  router: {
    options: {
      trailingSlash: true
    }
  }
});

2. スラッシュがないURLの場合スラッシュ付きにリダイレクトする

middlewareフォルダを作成し、trailingSlash.global.tsファイルを作成し、下記コード記載します。

project-folder/middleware/trailingSlash.global.ts

export default defineNuxtRouteMiddleware((to, from) => {
    if (!to.path.endsWith('/') && to.path !== '/') {
        return navigateTo(to.path + '/', { redirectCode: 301 });
    }
});

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選

Nuxt3 多言語対応サイトを作る

Nuxt3 URLをスラッシュ付きに統一する

Nuxt.js 変数・関数を共通化するinjectを使う

Nuxt.js ディレクトリ構成を理解する

Nuxt.jsにGoogle Adsenseの広告を好きなサイズで設置する

お得ニュース

AmazonでApple Watchが5000円引き。ポイント3%付きのお得セール開催中

ゲーミングPCが5万円引き。マウスコンピューターのビッグサマーセール第2弾が開催

Nuxt3 URLをスラッシュ付きに統一する

1. 最後尾にスラッシュを付与

2. スラッシュがないURLの場合スラッシュ付きにリダイレクトする

デザインを本で学びたい人向けの記事

関連記事

お得ニュース

プロフィール