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.

Axel · Accepted Answer · 2018-06-24 10:27:33Z

29

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!

answered Jun 24, 2018 at 10:27

Axel

5,28119 gold badges80 silver badges152 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Disapamok Over a year ago

It works, but appreciate if anyone could explain why did it work?

CodeNinja Over a year ago

I used this before Route::get('/any', 'SpaController@index')->where('any', '.*'); which didn't work. It seems that adding {} arround any solved my issue. Thanks.

Harris · Accepted Answer · 2021-09-14 13:33:31Z

1

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') },
        ]
    },
    

];

answered Sep 14, 2021 at 13:33

Harris

611 silver badge9 bronze badges

Collectives™ on Stack Overflow

Laravel Vue Router returns 404 page

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related