Vue SPA URL在启用历史记录模式的情况下不起作用 [英] Vue SPA url not working with history mode enabled

问题描述

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

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:

我有根视图:

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?}获取了返回视图数据.

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.

推荐答案

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

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:

这篇关于Vue SPA URL在启用历史记录模式的情况下不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！