Laravel Routes with Vue Router (SPA) Not Working as normal

Question

I am trying to create a Laravel Vue SPA application. And it seems that I cannot get the route all to function properly. Everytime I use the get('{any}') all my axios get methods call returns the index.blade.php. But if I define all routes in routes.js with more or less the same signature in my web.php (Laravel) my axios routes in getting the data works fine.

web.php

// This work but every time I do an Axios call it returns my index.blade.php
Route::get('{any}', 'SiteController')->where('any', '.*');

// This works if I define all routes, with axios fetching data normally and 
// displaying the data in Vue normally
Route::get('/', 'SiteController');
Route::get('/blog', 'SiteController');
Route::get('/post/{postId?}', 'SiteController');

routes.js

const routes = [
    { path: '*', component: Home },
    {
        path: '/',
        component: Home,
        children: [
            {
                name: 'blog',
                path: '/blog',
                component: PageBlogLists,
            },
            {
                name: 'post',
                path: '/post/:page_id',
                component: PageBlog,
            },
        ],
    },
];

 export default new VueRouter({
        base: '/',
        fallback: true,
        mode: 'history',
        routes: routes,
    });

Answer 1

So I finally got it working I've changed my routes to

 Route::get('/{any}', 'SiteController')->where('any', '^(?!api).*$');

and move all my API requests to the api.php file

Route::resource('/posts', 'WordpressController');

router.js and axios works fine now :)

Answer 2

So first the root view, I do not know how does yours look like but it should be something like this

Route::get('{path}', function () {
    return view('index');
})->where('path', '(.*)');

Second, you are building SPA, you should not be using web.php, you should use api.php

if you have to and really want to use web.php, you can move the any down to the bottom, and prefix all the other routes with something else.

Answer 3

I do not have a clear picture of the other codes you have in your hands.

But for laravel vue router, this reference helps me a lot

https://medium.com/@weehong/laravel-5-7-vue-vue-router-spa-5e07fd591981

You could give it a try. Hope this helps.