Angular$routeProvider.html 5手动刷新后模式路由崩溃

Question

启用index.html中的$locationProvider.html5Mode(true);和<base href="/" />后，手动重新加载后路由开始崩溃。

在查找解决方案时，我发现.htaccess规则可以解决这个问题，但不同的配置没有帮助。

也许这是因为我的index.html在子目录/views/index.html 中

.htaccess：

Options +FollowSymLinks
<ifModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !index
    RewriteRule (.*) index.html [L] # /views/index.html doesn't work as well
</ifModule>

route config

app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider
        .when('/', {
            templateUrl: 'home.html',
            controller: 'AddTaskCtrl',
            controllerAs: 'AddTask'
        })
        .when('/chat', { //this route breaks on manual refresh  
            templateUrl: 'chat.html',
            controller: 'ChatCtrl',
            controllerAs: 'chat'
        })
}]);

Answer 1

步骤1：仅使用$locationProvider.html5Mode（true）；

步骤2：更改.htaccess

RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]

当index.html是应用程序的起始加载点时，或者查看更多方法https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-配置您的服务器到使用html 5模式的工作