2019.01.20

vue-routerで404ページを用意する - with Laravel

LaravueでSPAをしている際に、404ページを用意しようと思ったのでメモを残します。

Vue.js Laravel 技術メモ

フロントエンド

[ 目次 ]

はじめに
Laravelのルーティングについて
Vue Routerの設定について
【要調査】APIから404が返却された場合

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。

LaravueでSPA開発をしている際に、404ページを用意しようと思ったので技術メモとして残しておきたいと思います。

■ 検証環境

PHP	Laravel	Vue.js	Vue Router
^7.2.4	5.7.*	^2.5.22	^3.0.2

Vue Router 404 Page with Laravel 5.7

こちらの動画を参考に進めていきます。
Vue Routerについては、公式ドキュメントもご確認ください。

Vue Router

Laravelのルーティングについて

Vue.js + Vue Routerを利用してクライアントレンダリングを行っています。Laravel側でwebページのルーティングは基本的には行いません。routes/web.phpは以下のようになっています。

<?php
Route::get('/{any?}', function () {
    return view('app');
})->where('any', '.+');

全てのリクエストの結果をviews/app.blade.phpとして返却します。
Laravel側では、404ページへのハンドリングは行いません。

Vue Routerの設定について

Vue Router側でルーティングの設定がないページは、404ページを表示するようにしましょう
今回は、resources/js/router.jsにVue Routerの設定を記述していることを前提とします。

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

import Home from '~/components/pages/Home.vue' // ホーム画面
import Register from '~/components/pages/Register.vue' // ユーザー登録画面
import Login from '~/components/pages/Login.vue' // ログイン画面

import NotFound from '~/components/pages/NotFound.vue' // Not Found(404)画面

import store from './store'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/login', component: Login },
  { path: '/register', component: Register },
  { path: '*', component: NotFound } // <--- ここを追加します
]

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