建立錯誤頁
在根目錄建立 error.vue 檔
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <template>
<div class="mt-7 max-w-sm mx-auto text-center card">
<p class="mt-7 text-7xl font-bold">{{ error.statusCode }}</p>
<p class="mt-7 text-6xl">Ooops...</p>
<p class="mt-7">{{ error.message }}</p>
<button class="btn my-7" @click="handleClearError">Go Home...</button>
</div>
</template>
<script setup>
defineProps(["error"]);
const handleClearError = () => clearError({ redirect: "/" });
</script>
|
在錯誤頁可以接收 error 這個 props ，再將錯誤代碼 error.statusCode、錯誤訊息 error.message 顯示到錯誤頁。
當使用者輸入不存在的路由時，就會自動被導入這頁。
手動導入錯誤頁
有時並不是路由錯誤，而是 api 的錯誤時，例如取得產品失敗時也想導入錯誤頁，可以手動導入
例如在產品頁面取得商品失敗，可以 throw createError 並帶入錯誤代碼、訊息，即可導入錯誤頁。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <script setup>
const { productId } = useRoute().params;
const url = 'https://fakestoreapi.com/products/' + productId;
const { data: product } = await useFetch(url);
if (!product.value) {
throw createError({
statusCode: 404,
statusMessage: 'Product not found',
fatal: true,
})
}
</script>
|