在 AngularJS 中处理路由时删除哈希答案

【问题标题】：remove hashes when dealing with routes in AngularJS在 AngularJS 中处理路由时删除哈希
【发布时间】：2016-08-22 09:04:12
【问题描述】：

我使用 Angular 制作了一个示例 SPA。我使用 Angular 路由功能来创建一个布局页面，然后根据最终用户请求的 URL 注入和交换不同的视图。索引页面上的 href 路由中的哈希值一切正常

<a href="#/page1">page1</a> 但这样做，我的网页 URL 将类似于 http://localhost/angular/#/page1

所以我想删除 URL 中的哈希值并使其像 http://localhost/angular/page1

要删除哈希，您必须启用 html5Mode 路由并在索引页面上设置基本 href

https://docs.angularjs.org/error/$location/nobase

我做了完全相同的事情（请参阅下面的代码 sn-p），但是它不起作用。我在本地主机 Apache 服务器上运行它。

var app = angular.module("myModule", ["ngRoute"])
  .config(function($routeProvider, $locationProvider) {
    $routeProvider
      .when("/page1", {
        templateUrl: "partials/page1.html",
        controller: "page1Controller"
      })
      .when("/page2", {
        templateUrl: "partials/page2.html",
        controller: "page2Controller"
      })
    $locationProvider.html5Mode(true);
  })
  .controller("page1Controller", function($scope) {
    $scope.message = "Page1";
  })
  .controller("page2Controller", function($scope) {
    $scope.message = "Page2";
  })

<html ng-app="myModule">

<head>
  <title>Angular Routing</title>
  <script type="text/javascript" src="angular.js"></script>
  <script type="text/javascript" src="angular-route.js"></script>
  <script type="text/javascript" src="js.js"></script>
  <link rel="stylesheet" type="text/css" href="styles.css">

  <base href="angular"></base>
</head>

<body>
  <table>
    <h3>Sammple Routing in AngularJS</h3>
    <tr>
      <td class="leftMenu">
        <a href="page1">page1</a>
        <a href="page2">page2</a>
      </td>
      <td class="mainContent">
        <ng-view></ng-view>
        <!--partials will be filled here-->
      </td>
    </tr>
  </table>
</body>

【问题讨论】：

您是否尝试在base href 末尾添加/？喜欢：<base href="angular/" />
是的，试过了..没用:(

标签： angularjs angularjs-routing

【解决方案1】：

我按照这篇文章从 URL 中删除了哈希：https://scotch.io/tutorials/pretty-urls-in-angularjs-removing-the-hashtag 这是他所做的快速代码：

app.js 或每个 Angular 页面：

app.config(["$locationProvider",
    function($locationProvider) {
        $locationProvider.html5Mode(true);
    }
]);

Angular 模板或每个 Angular 页面的头部都必须包含这个：

<base href="/">

我完全不确定内部工作原理，所以我无法解释它到底是做什么的。我所知道的一切都来自那篇文章，所以请随意看看。

编辑：<a href="#"></a> 可能有问题尝试使用像<a href=""></a> 这样的空字符串。它可以防止在单击死链接时将哈希值添加到 url，但仍会产生锚点悬停效果。

【讨论】：

-正如您在我的狙击手中看到的那样，我做了这两件事......它没有工作。我相信您需要像 Mike 提到的那样修改托管服务器设置。
我不确定，但您使用的是<base href="angular">吗？也许试试<base href="/angular">。另一个可能的问题是，当使用死链接时，我使用<a href=""></a> 而不是<a href="#"></a>。单击死链接时它不会添加#，但仍会产生链接悬停效果。
另外，当我查看您的代码时。如果你的基本网址是/angular，你的锚不应该是<a href="angular/page1"></a>吗？这与不使用 <a href="#"></a> 的死链接和 $locationProvider HTML5 模式一起应该消除您的 URL 中的哈希值。如果您遇到任何问题，请告诉我。

【解决方案2】：

我现在在 IIS 上为此苦苦挣扎，在我的苦苦挣扎中，偶然发现了一个出色的 Apache 指南：https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-htaccess/

我希望它有所帮助。

【讨论】：

感谢您的链接，非常有用..将尝试设置我的服务器设置