手动刷新

Question

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

在寻找解决方案时，我发现.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-to-configure-your-server-to-work-with-html5mode