HTML5 PushState 与 Angular UI-Router URL 路由发生冲突

Question

我有一个使用 ui-router 的 Angular.js web 应用程序（https://github.com/angular-ui/ui-router）带有并行命名视图，如下所示：

.state(
            'app.experience', {
                url: 'e/:experienceId',
                views: {
                    'center-pane@': {
                        templateUrl: 'partials/experience.html',
                        controller: 'ExperienceController'
                    }
                })

我通过以下方式启用了 HTML5 PushState

$locationProvider.html5Mode(true);

什么时候

http://www.mysite.com/e/123

被请求时，我的后端发回根目录下的index.html。（按照 在 angular.js 上使用 HTML5 PushState）但是，当浏览器收到index.html并开始获取所有css/js资源时，请求是针对

/e/js/script1.js

相对于

/js/script1.js

它只存在于根级别。似乎默认根目录为 mysite.com/e/ （来自请求的网址）而不是实际的根， mysite.com/.

我在这里缺少什么吗？是否无法在index.html 中为我的javascript 和css 使用相对src？

感谢您的帮助！

Answer 1

笔记：您还没有向我们展示 HTML 的外观，但根据您的问题，我假设您是 不是 使用文档根目录中的相对 URL。

您可以使用相对网址，但它们应该是相对的 基于文档根.

例如，您的 html 中可能有类似的内容

<img src="images/foo.jpg" />

你真的应该这样做（注意添加开头的“/”斜杠）

<img src="/images/foo.jpg" />

这不是 AngularJS 特有的东西，而是 html 的东西，请参阅 这个答案 更多细节。

您的浏览器使用的原因 /e/ 网址中是因为 浏览器 实际上请求的资源具有 /e/ 在网址中。浏览器不知道您的服务器响应的文件不在 /e/ 目录。

因此，如果您有一个开头没有正斜杠的相对 url，则它将相对于路径或原始请求的资源。您想要的是使用开头带有斜杠的相对网址。