对于AngularJS 1.7，手动导航在ui-router中不起作用

Posted 2021-04-17

我有以下状态配置：

function stateConfig($stateProvider) {
    $stateProvider
        .state("home", {
            url: "/",
            templateUrl: "/app/home/template/home.html",
            controller: "HomeController as homeController"
        });
        .state("user", {
            abstract: true,
            url: "/user",
            template: "<ui-view/>"
        })
        .state("user.list", {
            url: "/list",
            templateUrl: "/app/user/template/user.list.html",
            controller: "UserListController as userListController"
        });
}

user.list.html包含用户表，home.html包含user.list.html的链接：

<a class="btn btn-primary" ui-sref="user.list" role="button">View All Users</a>

当我启动应用程序并转到localhost:8080时，它会显示我home.html。然后，当我点击“查看所有用户”按钮时，它会显示user.list.html，我会看到一个用户表。 Evething工作正常，但是当我尝试重新加载页面时（按F5）或当我手动导航到localhost:8080/user/list时问题就开始了。它显示我404错误页面。我的问题是：为什么会这样？

答案

这与AngularJS无关，而与您的Web服务器无关。您需要配置用于将404错误路由到home.html的服务器。当您请求localhost:8080/user/list时，您的服务器找不到/user/list的资源。

想一想加载localhost时会发生什么：8080。你得到home.html，你的AngularJS应用程序已初始化。当您更改从localhost：8080到localhost:8080/user/list的路由时，ui-router的路由处理程序将触发。没有http请求发送到Web服务器。当您手动键入路由或按F5时，您向Web服务器发送一个http请求，查找服务器上不存在的资源/用户/列表，这样您就会收到404未找到错误。您需要配置404错误以加载home.html，这将加载AngularJS应用程序。