Laravel7.xにVue-Routerを実装してSPAを構築してみる (3)

概要

Laravel側で設定してないURLでリロードすると404エラーページが出てしまう。

リロードすると…

リロードすることでVue-Routerで設定したラウトのページへ飛ぶようにしてみる

詳細

Laravel側のラウト設定

• ラウトしていないURLもIndexページへ遷移するようにコードを追加
• URL情報をパラメータとしてVue-Routerに渡せるように設定

routes/web.php

// Route::get('/', function () {
//     return view('welcome');
// });
Route::get('/{extraUrl?}', function ($extraUrl = null) {
    return view('welcome', [
        'extraUrl' => $extraUrl
    ]);
});

上の処理でprefix（サブディレクトリ）がないURLはIndexページへ遷移することが可能
例１）localhost:8000/report

例２）localhost:8000/report/report

→　prefixが設定されているので404エラーが出力される…　ここは後で対応してみよう

Vue-Routerでデフォルトラウトを設定

• Vue-routerに設定されてないラウトが来た場合はIndexページへ遷移されるように設定

resources/js/app.js

const router = new VueRouter({
    mode: 'history',
    routes: [
        // Indexページ
        {
            path: '/report',
            name: 'report-page',
            component: ReportPage
        },
        // フォームページ
        {
            path: '/form',
            name: 'form-page',
            component: FormPage
        },
        // デフォルトページ；Indexページ
        {
            path: '*',
            redirect: '/report'
        },
    ]
});

結果確認

• localhost:8000/unknown_routeを入力してみる
  

→　404エラーページが出力されず、設定したデフォうとページに遷移されたのでOK