Vue SPA url 在启用历史模式的情况下不起作用

Posted 2023-02-22

【中文标题】Vue SPA url 在启用历史模式的情况下不起作用

【英文标题】：Vue SPA url not working with history mode enabled

【发布时间】：2017-06-15 21:47:38

【问题描述】：

我正在使用 Vue js 创建一个 SPA，它有点工作，但我有一个问题。在 Vue 上启用历史模式后，我可以输入 url 并使用 Vue 路由器转到该页面，但是当我尝试登录时，我得到了文字页面 html。我知道我可以做类似auth\vue? 的事情，但如果我不必这样做，我会更喜欢。我希望能够始终保持不带前缀的 url，除非它是针对 API 请求的。比如：

我有根视图：

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

然后我有 api 请求：

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

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

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

但是当我点击/api/login 时，我会从/vue? 获得返回视图数据。

我希望这是有道理的，如果有任何帮助将是惊人的，谢谢。

【问题讨论】：

我们很可能需要查看您的 javascript

【参考方案1】：

这里解释的很清楚：https://kjamesy.london/work/laravel-53-vuejs-20-make-vuerouters-history-mode-play-nicely-with-laravels-routes

简短的故事：在 VueRouter 中将历史模式声明为 false，然后在 Laravel 端，每当 $request->ajax() 为 false 时，相同的路由将始终捕获请求。因此，我们可以安全地定义一个包罗万象的路由，将此类流量重定向到资源控制器的 index() 方法：