Nuxt2 / Nuxt3でredirect処理をする

Nuxt2でリダイレクト処理を行う

リダイレクトをかけたいファイルのscriptに記述
例）/blog/newsに来たユーザーに対して/blogに飛ばす時（この時newsパスは動的に変わるものとする。）

pages/blog/_id.vue

<script>
import { defineComponent, useContext, useAsync } from '@nuxtjs/composition-api'

export default defineComponent({
  setup() {
    const { redirect } = useContext()

    useAsync(() => {
      redirect(301, '/blog')
    })
  },
})
</script>

やっていること

• _id.vueファイル読み込み時にuseAsyncでredirectを呼ぶ
• 第一引数にリダイレクト番号の301, 第二引数に遷移先を指定

Nuxt3でリダイレクト処理を行う

ルート直下に「middleware」ディレクトリを設置
その配下にリダイレクト用のファイルを作成
リダイレクト処理をグローバル定義するのでファイル名を「任意の名前.global.ts」と間にglobalを入れる。

middleware/redirect.global.ts

export default defineNuxtRouteMiddleware((to) => {
  if (to.path === "/blog/news") {
    // optionつける場合
    return navigateTo("/blog", { redirectCode: 301 );
    // optionつけない場合
    return navigateTo("/blog");
  }
});

参考:Nuxt3公式ドキュメント navigateTo

やっていること

• pathが/blog/newsの時は/blogにリダイレクト処理をかける
• その時のコードは301ですよと明示的に伝える

---

Nuxt3はmiddlewareディレクトリ内にグローバル定義したら割と簡単にリダイレクト処理ができた。
簡単な処理だけだったらこれでもいけそうです。