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

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

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

（ドメインは同じドメインを利用）

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

という話になり、

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

する設定をしました。

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

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

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

シンプルですね。

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

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

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

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

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

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

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

router プロパティ - NuxtJS