Vue SPA url not working with history mode enabled

问题

I am creating a SPA using Vue js and it kind of works but I have one problem. With history mode enabled on Vue I can enter urls and go to that page using the Vue Router but when I try to login I get the literal page html. I know I can do something like auth\{vue?} but I would prefer if i didn't have to do that. I want to be able to always keep the url with no prefixes unless it is to an API request. So for example:

I have the root view:

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

and then I have the api requests:

Route::group(['prefix' => 'api'], function () {
    Route::post('/login', 'Auth\\LoginController@login');

    Route::post('/register', 'Auth\\RegisterController@register');

    Route::get('/logout', 'Auth\\LoginController@logout');
});

but when I hit /api/login I get the return view data from /{vue?}.

I hope that makes sense and if so any help would be amazing, Thanks.

回答1:

it is clearly explained here: https://kjamesy.london/work/laravel-53-vuejs-20-make-vuerouters-history-mode-play-nicely-with-laravels-routes

Short story: declare history mode to false in VueRouter and then on the Laravel side, whenever the $request->ajax() is false, the same route will always capture the request. So, we can safely define a catch-all route to redirect such traffic to the index() method of our resource controller:

来源：https://stackoverflow.com/questions/41940951/vue-spa-url-not-working-with-history-mode-enabled