Angular 4 和 Laravel 5.4 的刷新路由问题

Posted 2023-02-27

【中文标题】Angular 4 和 Laravel 5.4 的刷新路由问题

【英文标题】：On-Refresh routing issue with Angular 4 and Laravel 5.4

【发布时间】：2018-07-26 00:55:42

【问题描述】：

我用 Angular 4 和 Laravel 5.4 创建了一个简单的应用程序来进行 CRUD 操作。

所以，基本上我有一个在 localhost:4200 上运行的 Angular 应用程序和在 localhost:8000 上运行的 Laravel 应用程序（仅用于 api）

现在我使用

将 angular 4 集成到 Laravel 中

 ng build

现在我的应用程序完全在 localhost:8000 Perfect 上运行！

现在是问题现场！

1 2 3

所以，如您所见，它采用角度路线，但当我刷新同一页面时，它正在寻找 laravel 路线。如何解决这个问题？

Laravel 路由仅用作 Angular 的 api 用于数据传输 json.

您的帮助将不胜感激！

【参考方案1】：

好的，这已在 Angular 官方文档的 Deployment 部分中得到解决。问题是，Angular 应用程序是单页应用程序，这意味着它只有一个index.html 文件，而所有其他路由都由 Angular 浏览器客户端管理。 如果你从页面 A 到页面 B，你已经有一个 Angular 应用程序来处理重定向。但是，如果您刷新，浏览器将处理不包含您请求的页面的 API。

这意味着您需要配置您的服务器。如果您要实时部署，请使用此 .htaccess 配置，例如：

RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %DOCUMENT_ROOT%REQUEST_URI -f [OR]
RewriteCond %DOCUMENT_ROOT%REQUEST_URI -d
RewriteRule ^ - [L]
# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

它只会返回要呈现的 Angular 应用程序的 index.html 文件。否则配置你的 Laravel 路由来做同样的事情。

在这里了解更多关于这个问题的信息：Angular Deployment

【讨论】：

感谢您的回复。这是一个与 laravel 集成的 Angular 应用程序，它在 laravel 服务器中运行。

正如我所提到的，如果找不到路由，只需将您的路由配置为返回 Angular 应用程序的 index.html。这将解决问题。您不需要跟踪每个 Angular 路由，只要是404，那么它可能是一个Angular 路由，最好返回index.html

拥有一个 Anguar 404 页面可能也不错，只需使用 '**' 作为路由

所以我需要更改 laravel htaccess 吗？

我不是 Laravel 的专家，但如果你有一个 .htaccess 文件，那么只需复制粘贴我的答案中的豁免 - 应该可以完成这项工作

【参考方案2】：

使用 Laravel 7 和 Angular 9。

这个答案没有使用RouterModule.forRoot(routes,useHash: true)

步骤：

1) 使用默认的<base href="/"> 构建您的应用程序。

2) 将所有文件从 dist/<project name> 复制到 Laravel 文件夹，public。

3) 从 Laravel 公用文件夹中，仅将 index.html 文件移动/剪切到 Laravel 资源/视图

4) 将index.html 重命名为index.blade.php

5) 在 Laravel 路由文件夹中，打开 web.php，删除并替换。

Route::get('/', function () 
    return view('welcome');
);

替换为：

Route::fallback(function () 
    return view('index');
);

这样所有找不到404错误的链接都会重定向到index.blade.php 就是这样！

Laravel public folder structure.

【讨论】：

或者如果你比较懒，把public/index.html移到resources/views/welcome.blade.php后，在web.php中添加：Route::fallback(function()return view ('欢迎'); );

【参考方案3】：

对于 Angular 中的所有路由，您需要路由到 Laravel 中的索引操作。

试试：

foreach(['/', '/about', '/another_route'] as $route)
    Route::get($route,[
        'uses'=>'siteController@index',
        'as'=>'index'
     ]);

所有这些 URL 将被重定向到同一个入口点，由操作 siteController@index 呈现的视图（通常是主页），然后角度路由器将处理路由到正确的位置。

【讨论】：

感谢您的快速回复。你能告诉我索引函数里面应该是什么吗？

主页正在从角度路径加载。因此，如果我在注册页面（localhost:8000/register）并刷新，我应该得到相同的注册页面。不是主页。

【参考方案4】：

所以，我终于解决了这个问题。感谢所有 cmets 并回复我的问题。 如果有人遇到同样的问题，请实施：

角度4中的hashlocationstrategy

我刚刚在 angular 的路由模块中添加了一个参数，效果很好。

RouterModule.forRoot(routes,useHash: true),

For more details, check here