角度 UI 路由在页面重新加载或直接 URL 命中时不起作用答案

【问题标题】：angular UI route not work on page reload or direct URL hit角度 UI 路由在页面重新加载或直接 URL 命中时不起作用
【发布时间】：2017-03-09 13:41:11
【问题描述】：

当我点击 ui-sref="state1" 或 ui-sref="state" 时，它工作正常，将 url 更改为 http://demo/state1 或 http://demo/state2 但直接点击 url 它不工作

HTML 代码

<html>
<base href="/">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="personCtrl">


    <div ui-view></div>
    <!-- We'll also add some navigation: -->
    <a ui-sref="state1">State 1</a>
    <a ui-sref="state2">State 2</a>

</div>
</body>
</html>

JS代码

var app = angular.module('myApp', ['ui.router']);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    };
});
app.config(function($stateProvider,$locationProvider, $urlRouterProvider) {
  // 
  // For any unmatched url, redirect to /state1 
  $urlRouterProvider.otherwise("/state1");
  // 
  // Now set up the states 
  $stateProvider
    .state('state1', {
      url: "/state1",
      template: "<div>state1</div>"
    })

    .state('state2', {
      url: "/state2",
      template: "<div>state2</div>"
    })
    $locationProvider.html5Mode(true);
});

【问题讨论】：

您的服务器必须设置为支持html5Mode。见github.com/angular-ui/ui-router/wiki/…
你的根网址是什么？演示有效吗？
ng1 路由器中的 URL 更改不是服务器中真正的 URL 更改，仅在客户端本地。 ng1 路由器只是将与服务器上的内容分离的本地模板和数据拼接在一起。

标签： html angularjs angular-ui-router virtualhost

【解决方案1】：

您需要为您的服务器编写 url 重写规则，以便针对任何请求重定向到 index.html。

Look here for details

【讨论】：