了解如何从角度路由中删除哈希值#

用户名

在删除井号之前,我已经

mainApp.config(function ($locationProvider, $routeProvider) {
    $routeProvider
    .when('/page', {
        controller: 'Page',
        templateUrl: 'templates/page.html'
    })
    .when('/main', {
        controller: 'Main',
        templateUrl: 'templates/main.html'
    })
    .otherwise({ redirectTo: '/main'});

    //$locationProvider.html5Mode(true);
});

这些工作正常

http://localhost:8080/index.html#/main
http://localhost:8080/index.html#/page

删除井号后,我将其添加到index.html

<base href="/">
<script src="/vendor/bootstrap-dist/js/bootstrap.min.js"></script>
<script src="/vendor/javascript/angular/angular.js"></script>
<script src="/vendor/javascript/angular/angular-route.js"></script>
<script src="/vendor/javascript/angular/ui-bootstrap-tpls-0.11.2.min.js"></script>
<script src="/javascript/index.js"></script>
<script src="/javascript/controllers/main.js"></script>
<script src="/javascript/controllers/page.js"></script>

和index.js

$locationProvider.html5Mode(true);

现在点击http://localhost:8080重定向到http://localhost:8080/main

http://localhost:8080/main直接在浏览器中返回404以及其他页面

我应该怎么做才能解决这个问题?

我的后端是Java

JB Nizet

那是意料之中的。这是未打开html5时发生的情况:

  • http://localhost:8080/index.html#/main在地址栏中输入网址
  • 浏览器向localhost:8080 / index.html发出http请求,并获取html页面作为响应
  • html页面包含一个已执行的角度应用程序。角度路由器解析散列(/ main)之后的路径,从而加载关联的视图和控制器

现在,当您启用html5模式并加载index.hml时会发生什么?

  • http://localhost:8080/index.html在地址栏中输入网址
  • 浏览器向localhost:8080 / index.html发出http请求,并获取html页面作为响应
  • html页面包含一个已执行的角度应用程序。角度路由器解析路径(/index.html),发现它与任何路由都不匹配,因此将地址栏中的位置更改为默认位置:/ main,然后加载关联的视图和控制器。更改地址栏中的位置除了使浏览器在导航历史记录中添加新条目外,不会使浏览器执行任何其他操作。

现在,如果您单击刷新或直接http://localhost:8080/main在地址栏中输入会发生什么那么,在这种情况下,您是在说浏览器:“请在url上加载页面http://localhost:8080/main。这就是浏览器的工作:它将HTTP请求发送到http://localhost:8080/main。由于服务器在该地址没有任何内容,因此它将发回404。

现在如何使其工作?实际上非常简单:您需要配置服务器,使其在收到路径/main(以及角度应用程序的所有其他路径)请求时发回index.html页面这样,浏览器将加载HTML页面,包含的角度应用程序将重新启动,角度路由器将从/mainURL解析路径(),从而将加载与该路径关联的视图和控制器。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

从AngularJS的默认路由中删除哈希

来自分类Dev

如何在角度路由中添加Urls?

来自分类Dev

如何从角度路由中删除ASP.NET MVC控制器名称

来自分类Dev

从AngularJS路由中删除#

来自分类Dev

如何删除控制器路由中的斜线?

来自分类Dev

路由中如何处理多余的哈希?(AngularJS 1.5 +新增/组件路由器)

来自分类Dev

如何检查给定值是私有路由中的JWT?

来自分类Dev

如何在Angular JS路由中禁用带有哈希的链接?

来自分类Dev

如何在UI5-路由中的URL中消除哈希符号(`#`)?

来自分类Dev

如何获得流星铁路由器路由中多个数据参数的值?

来自分类Dev

从Laravel路由中删除server.php

来自分类Dev

默认路由中带有占位符的角度路由

来自分类Dev

如何从哈希映射中删除重复值

来自分类Dev

我如何删除基于多个值的哈希

来自分类Dev

了解Laravel路由中的一行代码

来自分类Dev

如何从ui路由器的网址中删除哈希标记(#)

来自分类Dev

Symfony 2.1+对路由中的哈希/磅“#”进行编码

来自分类Dev

如何删除哈希值为空白的哈希键?

来自分类Dev

如何在骆驼XML路由中删除文件名的一部分

来自分类Dev

如何在Laravel 5.2中的路由中使用删除方法

来自分类Dev

属性路由中的可选静态值

来自分类Dev

属性路由中的可选静态值

来自分类Dev

在 API 路由中允许空值

来自分类Dev

如何在Angular2 rc3路由中处理来自oauth重定向URL的哈希片段

来自分类Dev

如何在角度的哈希(#)之后删除立即斜杠(/)

来自分类Dev

剃刀页面-如何将选择下拉值插入到ASP路由中?

来自分类Dev

如何在Symfony2路由中定义默认日期值?

来自分类Dev

如何从内部路由中调用模型?

来自分类Dev

Flutter:如何从生成路由中注销?

Related 相关文章

  1. 1

    从AngularJS的默认路由中删除哈希

  2. 2

    如何在角度路由中添加Urls?

  3. 3

    如何从角度路由中删除ASP.NET MVC控制器名称

  4. 4

    从AngularJS路由中删除#

  5. 5

    如何删除控制器路由中的斜线?

  6. 6

    路由中如何处理多余的哈希?(AngularJS 1.5 +新增/组件路由器)

  7. 7

    如何检查给定值是私有路由中的JWT?

  8. 8

    如何在Angular JS路由中禁用带有哈希的链接?

  9. 9

    如何在UI5-路由中的URL中消除哈希符号(`#`)?

  10. 10

    如何获得流星铁路由器路由中多个数据参数的值?

  11. 11

    从Laravel路由中删除server.php

  12. 12

    默认路由中带有占位符的角度路由

  13. 13

    如何从哈希映射中删除重复值

  14. 14

    我如何删除基于多个值的哈希

  15. 15

    了解Laravel路由中的一行代码

  16. 16

    如何从ui路由器的网址中删除哈希标记(#)

  17. 17

    Symfony 2.1+对路由中的哈希/磅“#”进行编码

  18. 18

    如何删除哈希值为空白的哈希键?

  19. 19

    如何在骆驼XML路由中删除文件名的一部分

  20. 20

    如何在Laravel 5.2中的路由中使用删除方法

  21. 21

    属性路由中的可选静态值

  22. 22

    属性路由中的可选静态值

  23. 23

    在 API 路由中允许空值

  24. 24

    如何在Angular2 rc3路由中处理来自oauth重定向URL的哈希片段

  25. 25

    如何在角度的哈希(#)之后删除立即斜杠(/)

  26. 26

    剃刀页面-如何将选择下拉值插入到ASP路由中?

  27. 27

    如何在Symfony2路由中定义默认日期值?

  28. 28

    如何从内部路由中调用模型?

  29. 29

    Flutter:如何从生成路由中注销?

热门标签

归档