angularjs - 手动导航在 AngularJS 1.7 的 ui-router 中不起作用
问题描述
我有以下状态配置:
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 请求,以查找服务器上不存在的资源 /user/list,因此您会收到 404 not found 错误。您需要配置 404 错误来加载 home.html,这将加载 AngularJS 应用程序。
推荐阅读
- python-3.x - 从多个 URL 中提取数据帧,导出到一个 CSV
- identityserver4 - Blazor WASM + IdentityServer4 + 自定义用户存储
- assembly - 堆栈指针在 x86 系统上的工作原理
- android - React Native Fetch 命令在调试版本上返回 JSON,但不是发布版本
- vue.js - Nuxt.js/Axios 自签名证书错误
- r - 如何在 Shiny 的 daterange UI 中显示文本?
- node.js - 快速发布请求将我重定向到 json 页面,而不是显示成功或错误消息 toast
- c - 使用 libelf 在 ELF 文件中注入 .preinit_array 部分
- c# - 记住窗口设置(大小、位置、位置)并恢复,但到屏幕 1
- python - Python 池映射问题 - 列表列表