Nuxt.jsでリダイレクト設定を追加する

2021.08.02
Nuxt.jsでリダイレクト設定を追加する

Laravelで組まれたシステムをNuxt.jsにリプレースするというプロジェクトに参画しました。



リプレースを行うに辺り、URLを変更したページがいくつかありました。

(ドメインは同じドメインを利用)




当然、サービス的にもSEO的にも以前のURLにアクセスしたら新しいページにリダイレクトさせよう。

という話になり、


旧URL → 新URLにリダイレクト

する設定をしました。



その際に行ったことを記載します。

検証した環境

1 nuxt 2.14.7

nuxt.config.jsにリダイレクト設定を記載する

やることは「nuxt.config.jsにリダイレクト設定を記載する」のみ。


シンプルですね。



例えば /hogeにアクセスがあったら/fugaにリダイレクトする場合、

以下のように記載します。

nuxt.config.js
export default {
  router: {
    extendRoutes(routes) {
      routes.push(
        { path: '/hoge', redirect: '/fuga' },
      )
    }
  }
  ・・・
}

extendRoutesというのはNuxt.jsのルートを拡張する際に使用するメソッドで、

例えば「あるURLにアクセスされたらNuxtのPages/フォルダのルールに関わらず、必ずxx.vueを使用する」といった設定を書く事も出来ます。


(ここに書くと紛らわしくなるのでサンプルは省略しますね)



extendRoutes の使い方はNuxt.jsの公式にまとめられています。

router プロパティ - NuxtJS

おすすめ