javascript - html5mode 破坏了 AngularJS 路由

Question

我在 ngRoute 中使用 html5Mode 时遇到问题，这与其他人遇到的问题不太一样。这是我的代码中最相关的部分:

(function () {
  var config = function ($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'home/home.view.html',
        controller: 'homeCtrl',
        controllerAs: 'vm'
      })
      .when('/about', {
        templateUrl: 'common/views/genericText.view.html',
        controller: 'aboutCtrl',
        controllerAs: 'vm'
      })
      .when('/location/:locationId', {
        templateUrl: 'locationDetail/locationDetail.view.html',
        controller: 'locationDetailCtrl',
        controllerAs: 'vm'
      })
      .otherwise({redirectTo: '/'});

    /* $locationProvider.html5Mode({
     enabled: true,
     requireBase: false
    }); */
  };

  angular
    .module('loc8r', ['ngRoute', 'ngSanitize'])
    .config(['$routeProvider', '$locationProvider', config]);
})();

该问题特别出现在 /location/:locationId 的路由上。启用 html5Mode 后，尝试加载 http://127.0.0.1:3000/location/5a27ab691c5e0a989c0634da 之类的 URI 会导致空白页面。奇怪的是，我的 Node 日志输出告诉我模板和 Controller 都正在被访问。更奇怪的是，如果我将路由从 /location/:locationId 更改为 /:locationId 并加载 http://127.0.0.1 这样的 URI: 3000/5a27ab691c5e0a989c0634da，然后页面将加载。但让 /location/:locationId 正常工作的唯一方法是禁用 html5Mode ，然后转到 http://127.0.0.1:3000/# !/location/5a27ab691c5e0a989c0634da。但这很难看。在这种情况下如何让 html5Mode 正常工作？

如果有必要，我可以将我最近的所有更改推送到 GitHub，然后提供完整的代码。

Answer 1

您是否在index.html文件中设置了base属性？

检查:How to setup AngularJS $locationProvider HTML5 mode for non-root base urls?