Laravel Vue Router returns 404 page

Question

I am using Vue Router in my app. When user visits '', the HomeComponent should load and it does! However, when I goto /login, the LoginComponent doesn't load and the app redirects me to the 404 page. Please help.

routes.js

import HomeComponent from './components/Home.vue';
import LoginComponent from './components/auth/LoginComponent.vue';

export const routes = [
    {path: '', component: HomeComponent},
    {path: '/login', component: LoginComponent},
];

app.js

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

routes/web.php

Route::get('/', function () {
    return view('layouts.master');
});

There's this MasterComponent where these routes load. The HomeComponent loads but other component don't load. Actually, it happened I when wrote mode: 'history' in my app.js! It was working fine earlier until I changed the mode to history.

Answer 1

Just found the solution:

Route::get('/{vue_capture?}', function () {
    return view('layouts.master');
})->where('vue_capture', '[\/\w\.-]*');

This helps the Laravel to capture URLs generated by Vue! That's it!

Answer 2

First put this in your web.php

Route::get('/{any}', [\App\Http\Controllers\TestController::class,'home'])->where('any', '.*');

then in your router.js use this const routes = [

    {
        path: '/',
        component: () => import('./pages/Layout'),
        children: [
            { path: '', component: () => import('./components/DataTable') },
        ]
    },
    

];