Vue.jsで404や500エラーページの制御がしたい

404エラーページ

Vue Routerを利用して制御する。
ワイルドカードのパスを作ることで、どのパスにもマッチしなかった時のビューに飛ばすことができる。
サブディレクトリで使う404ビューを変えることもできる。

src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

import Index from '@/views/Index'
import NotFoundError from '@/views/errors/404'
import FooNotFoundError from '@/views/errors/foo/404'
import BarNotFoundError from '@/views/errors/bar/404'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Index',
    component: Index,
  },
  {
    path: '*',
    name: 'NotFoundError',
    component: NotFoundError,
  },
  {
    path: '/foo/*',
    name: 'FooNotFoundError',
    component: FooNotFoundError,
  },
  {
    path: '/bar/*',
    name: 'BarNotFoundError',
    component: BarNotFoundError,
  },
]

const router = new VueRouter({
  mode: 'history',
  routes: routes,
})

500エラーページ

errorHandlerフックを利用して制御する。
キャッチされない例外が発生したとき、最終的にerrorHandlerが呼び出されてくれるため、そこで500エラーのビューに飛ばしています。

src/main.js

～省略～
// Error Handling
Vue.config.errorHandler = (err, vm, info) => {
  console.error(`errorHandler: ${info}`, err)
  router.replace({ name: 'InternalServerError' })
}

new Vue({
  router,
  render: (h) => h(App),
}).$mount('#app')

適当なエラーページ

src/views/errors/500.vue

<template>
  <div>
    <h1>500 Internal Server Error</h1>
  </div>
</template>

エラーページへのルーティングを追加

src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

import Index from '@/views/Index'
import InternalServerError from '@/views/errors/500'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Index',
    component: Index,
  },
  {
    path: '/error',
    name: 'InternalServerError',
    component: InternalServerError,
  },
]

const router = new VueRouter({
  mode: 'history',
  routes: routes,
})

export default router

コンポーネントの中でこんな感じで例外を飛ばしてみると確認できます。

 mounted: function(){
   throw new Error('Error')
 }