Vue3エラー画面作成
Vue3でエラー画面の実装方法です。
404エラー
404エラーはvue-routerに設定します。まずエラー画面を作成します。
pages/404.vue
<template>
404エラー
</template>
vue-routerに404エラー画面設定します。
router/index.js
import NotFound from '../pages/404.vue'
const routes = [
{
path: '/:catchAll(.*)',
name: 'NotFound',
component: NotFound,
}
];
ネットで調べてみると「*」でいけるような記載があったのですが、viteのバージョンなどの影響か私の環境ではエラーになりました。
500エラー
500エラーはmain.jsにerrorHandlerを追加します。Vue3では以下のような記載になります。
main.js
const app = createApp(App)
// 500エラー
app.config.errorHandler = (err, vm, info) => {
router.replace({ name: 'InternalServerError' })
}
app.use(router)
app.mount('#app')
エラー画面を作成します。
pages/500.vue
<template>
500エラー
</template>
vue-routerにも追加します。
router/index.js
import InternalServerError from '../pages/500.vue'
const routes = [
{
path: '/error',
name: 'InternalServerError',
component: InternalServerError,
},
];
エラーを擬似的に起こす場合は以下のメソッドを画面に埋め込めばエラーが起きます。
mounted: function () {
throw new Error("Error");
},