角度的UI路由不工作页面刷新或直接URL击中

问题描述:

当我点击ui-sref =“state1”或ui-sref =“状态”它工作正常,更改网址像http://demo/state1http://demo/state2但直接命中它不工作的网址enter image description here角度的UI路由不工作页面刷新或直接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); 
}); 
+0

您的服务器已被设置为支持'html5Mode'。请参阅https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5modehttps://github.com/angular -ui/ui-router/wiki/Frequently-Questions-Questions#怎样配置你的服务器与html5mode模式 – Claies

+0

你的根网址是什么?演示是否有效? –

+0

ng1路由器中的URL更改不是仅在客户端本地的服务器中的实际URL更改。 ng1路由器只是将模板和数据从服务器上的内容分离出来。 –

你需要写URL重写规则为您的服务器重定向到我ndex.html用于任何请求。

Look here for details