Nuxtの動的ルーティングで一覧画面のページングに共通のVueファイルを使う

環境

• Nuxt - 3.11.1
• Node.js - 20.11.1

やりたいこと

• /blog
• /blog/page/2
• /blog/page/3

実装方法

• pages/ · Nuxt Directory Structure

root/
　├ pages/
　│　└ blog/
　│　　　└ [[slug]]
　│　　　　　└ [[page]].vue
　├ package.json
　└ nuxt.config.ts

<script lang="ts" setup>
const route = useRoute()
const { data, error } = await useAsyncData(
  route.path,
  () => {
    // /blog もしくは /blog/page/<1～9から始まる数字>
    if (!/^\/blog(\/page\/[1-9]\d*)?\/?$/.test(route.path)) {
      throw new Error('URLの形式が不正です')
    }
    // 記事を取得する処理など
    return ...
  }
)

if (error.value) {
  throw createError({
    statusCode: 404,
    message: error.value.message,
    fatal: true,
  })
}
</script>