如何让 AngularJS ui-router 正确响应浏览器页面刷新？答案

【问题标题】：How can I get AngularJS ui-router to respond correctly to a browser page refresh?如何让 AngularJS ui-router 正确响应浏览器页面刷新？
【发布时间】：2015-02-26 18:02:14
【问题描述】：

我创建了一个使用 ur-router 的 AngularJS 应用程序。这是配置的一个小示例：

 $locationProvider.html5Mode(true);

 var admin = {
        name: 'admin',
        url: '/Admin',
        views: {
            'root': {
                templateUrl: '/app/admin/partials/home.html',
            },
            'content': {
                templateUrl: '/app/admin/partials/overview.html',
            }
        }
    };

    var adminContent = {
        name: 'admin.content',
        parent: 'admin',
        url: '/:content',
        views: {
            'root': {
                templateUrl: '/app/admin/partials/home.html',
            },
            'content': {
                templateUrl: function (stateParams) {
                    return '/app/admin/partials/' + stateParams.content + '.html';
                },
            }
        }
    };

当我启动应用程序时一切正常，然后通过链接转到 /Admin，然后我转到参考链接，它会打开页面：

http://xx.com/Admin/reference

当我单击浏览器返回按钮时，它会按预期返回到上一页。

但是，如果我现在进行刷新，一切都会出错。它忘记了 ui-router 并尝试查找页面：xx.com/Admin/Reference

作为参考，我正在使用：@version v0.2.13

我的索引文件如下所示：

<head>
    <base href="/" />

有人可以给我一些关于我做错了什么的建议吗？

【问题讨论】：

这可能是您的服务器配置造成的。您应该将所有内容重定向到主页。您也可以尝试使用<base> 标签
我更新了问题以显示标签。您能解释一下“将所有内容都重定向到主页”是什么意思吗？我有点担心的一件事是，我在服务器端可以做的事情受到限制，因为它使用的是 Amazone Cloudfront，其中每个页面都只是一个文件，唯一的默认设置是我可以选择 index.html 作为如果我只是输入 www.xx.com 的启动文件

标签： angularjs angular-ui-router

【解决方案1】：

发生这种情况是因为您使用的是 HTML5 模式。您可以禁用它或配置您的服务器来处理它。

当您单击页面上的链接时，javascript 会更改显示的 url，但实际上并没有导航到新的 url。刷新时，浏览器会向服务器请求新的 url。服务器将其视为常规请求，但在该 url 处没有任何页面，因此它返回 404。您可以将服务器配置为将任何 url 重定向到您的主页，这样就不会发生这种情况。当您刷新（使用正确的配置）时，服务器将发回 index.html（或任何您的主页），并且 javascript 可以从 url 中获取参数。

本文档解释了如何在 ui-router 中配置服务器。 https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

您还需要一个<base> 标签，以便 Angular 可以区分 url 参数和 url 的其余部分。

例如<base>标签：

如果您的网站是 http://www.example.com/ 并且您位于管理页面 (http://www.example.com/Admin)，那么您的基本标记将类似于 <base href="http://www.example.com/">

有关 Angular 中不同路由模式的更多信息，请参阅：https://docs.angularjs.org/guide/$location

【讨论】：

好吧，看来我误解了如何做基本标签。我会尝试你建议的方式。谢谢