Question

我创建了一个使用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="/" />

有人能给我一些关于我做错的建议吗？

Answer 1

这种情况正在发生，因为您正在使用HTML5mode。您可以将其禁用或配置服务器来处理它。

当您点击页面上的链接时，javascript会更改显示的网址，但实际上并不会导航到新的网址。刷新时，浏览器向服务器发出新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参数和网址的其余部分。

示例<base>代码：

如果您的网站为http://www.example.com/并且您位于管理页面（http://www.example.com/Admin），则您的基本标记看起来像<base href="http://www.example.com/">

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

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

1 个答案: