我在我的角度的应用程序中使用Angular UI路由器,我已经启用了
HTML5模式,通过在配置中使用$locationProvider来删除#形式的URL.
var app = angular.module('openIDC',['ui.router']);
app.config(function($urlRouterProvider,$stateProvider,$locationProvider) {
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home',{
url: '/',templateUrl: 'views/home.html',controller: 'HomeController'
})
.state('login',{
url: '/login',templateUrl: 'views/login.html',controller: 'LoginController'
})
});
我也设置了< base href =“/”/> index.html文件中的标签.路由工作正常,我可以导航到页面,#被删除,但是当我使用浏览器上的重新加载按钮刷新页面时,有404错误响应.
为什么会发生这种情况,如何解决这个问题,并启用HTML5模式才能使用适当的网址
解决方法
Kasun的原因是因为您正在尝试从您的一个子路由刷新页面(与ui-router无关).
基本上,如果您要求www.yourdomain.com/您可能有您的服务器设置返回index.html哪个引导您的角度的应用程序.一旦应用程序加载,任何进一步的URL更改将考虑html5Mode并通过ui-router更新您的页面.
当您重新加载页面时,角度应用程序不再有效,因为它尚未加载,因此如果您尝试加载子路由(例如：www.yourdomain.com/someotherpage),则您的服务器不知道如何处理/ someotherpage可能返回404或其他一些错误.
您需要做的是配置您的服务器以返回所有路由的角度应用程序.我主要使用node / express,所以我做了一些事情：
app.get('*',function(req,res,next) {
// call all routes and return the index.html file here
}
注意：我通常使用这样的东西作为最终的捕获,但是我还包括其他路线上面的东西,例如请求静态文件,Web爬虫和任何其他需要处理的特定路线.