Laravel VueJs SPA : should VueJS router routes match with Laravel routes

Question

The question is pretty simple.

in order to build a Simple Page Application (SPA) with Laravel and VueJS , should all the paths present in router.js ( the file defining paths for SPA) be also present in web.php of Laravel ?

For example I am using the source code from here :

router.js inside resources/assets/js/frontend has :

export default [

    { path: '/create', component: SubmitTicketFormComponent },
    { path: '/view/:ticketId', name: 'client-view-ticket', component: ViewTicketComponent, props: true }
];

But the web.php inside routes folder has

Route::get('/', function () {
    return view('welcome');
});
Route::get('/admin', function () {
    return view('admin');
});
Route::post('/login', 'Auth\LoginController@login');
Route::post('/logout', 'Auth\LoginController@logout')->name('logout');
//Auth::routes();
Route::get('/home', 'HomeController@index')->name('home');

And the api.php inside routes folder has :

Route::middleware('auth:api')->group(function() {
    Route::get('/profile', 'ProfileController@index');
    Route::apiResource('/admin/tickets', 'Admin\TicketsController');
});
Route::apiResource('tickets', 'TicketsController');

So what are the rules regarding the path or route declaration for both VueJs and Laravel ?

Answer 1

If you want to have a SPA and keep some of the Laravel pages you need to have a route like this:

Route::get('/{any}', 'VueController@index')->where('any', '.*');

This can be at the end of your routing file, so if it does not match the existing Laravel routes and it will open the Vue SPA and the routing will be handled from there.