HighLab

Nuxt.jsのURLの末尾にスラッシュをつけるかどうかどっちがいいの？

  • 公開日：
  • 更新日：
  • 文字数：849文字

はじめに

nuxtのurlは末尾がついていても、ついてなくてもどちらでも読み込み可能です。なのでどっちがいいのか迷うと思います。結論から言って 末尾にスラッシュをつけるかどうかはどちらでもいい です。
ただ、統一させることが大切です。SEO的に混合するのはよくないですので絶対統一させましょう。今回は、末尾にスラッシュをつける方法を紹介。

設定

リダイレクト処理用のコードを書きます。
middleware/redirect.jsに下記コードを記述

// 末尾にスラッシュがなければスラッシュ付きのルートへ301リダイレクトする
export default function({ route, redirect }) {
  const path = route.path
  const hash = route.hash
  const type = route.query.type
  if (path.slice(-1) !== '/' && path !== '/404') {
    if (hash) {
      redirect(301, path + '/#' + hash)
    } else if (type) {
      redirect(301, path + '/?type=' + type)
    } else {
      redirect(301, path + '/')
    }
  }
}

nuxt.config.js

export default {
  router: {
    trailingSlash: true,
    middleware: ['redirect'] // 追加
  }
}

参考文献

https://qiita.com/too/items/1b0944f5acb2aeb4e9b9

目次

Category