Reputation: 5141
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.
Upvotes: 3
Views: 8593
Reputation: 63
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') },
]
},
];
Upvotes: 1
Reputation: 5141
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!
Upvotes: 29