【ワンピースで覚えるNuxt】エラー処理
エラーを発生させる
createError()
エラーオブジェクトをthrowする
pages/index.vue
<template>
<h1>TOP</h1>
<nav id="breadcrumbs">
<ul>
<li>TOP</li>
</ul>
</nav>
<section>
<p>
<!-- <NuxtLink to="/character/characterList"> -->
<NuxtLink v-bind:to="{name: 'character-characterList'}">
キャラクターの設定はこちらから
</NuxtLink>
</p>
</section>
<section>
<p>
<NuxtLink v-bind:to="{name: 'errorHandlerBasic'}">
ルフィvsクロコダイル
</NuxtLink>
</p>
</section>
</template>
pages/errorHandlerBasic.vue
<template>
<ErrorGeneratorBasic/>
<p>
<NuxtLink v-bind:to="{name: 'index'}">
戻る
</NuxtLink>
</p>
</template>
components/ErrorGeneratorBasic.vue
<script setup lang="ts">
const onThrowsErrorClick = (): void => {
throw createError("ルフィが負けた(エラー発生)");
};
</script>
<template>
<section>
ルフィvsクロコダイル <button v-on:click="onThrowsErrorClick">結果</button>
</section>
</template>
エラー時の表示をする
NuxtErrorBoundaryタグ
slotの仕組みを利用する
pages/errorHandlerBasic.vue
<template>
<NuxtErrorBoundary>
<ErrorGeneratorBasic/>
<template v-slot:error="errorProps">
<p>対戦した結果</p>
<p>{{errorProps.error}}</p>
</template>
</NuxtErrorBoundary>
<p>
<NuxtLink v-bind:to="{name: 'index'}">
戻る
</NuxtLink>
</p>
</template>
ここから先は
16,354字
¥ 100
この記事が気に入ったらサポートをしてみませんか?