2017-03-09 64 views
0

當我點擊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路由器只是將模板和數據從服務器上的內容分離出來。 –

回答