AngularJS路由+ .htaccess重写+路由参数=不工作[重复]

Question

这基本上是this question 的转贴，因为问题没有得到正确回答。

使用一组基本的自我解释性 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]

考虑以下链接。

1. http://localhost/clouds
2. http://localhost/wind
3. http://localhost/city/Tokyo

链接 1 和 2 在页面刷新时工作正常，但链接 3 只能通过页面导航（单击链接）访问。如果我在浏览器中手动粘贴第三个链接，我会进入索引页面，这与链接 1 和 2 不同。

我的路线配置：

theApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    "use strict";
    console.log('Configuring');
    $routeProvider.when('/clouds', {
        templateUrl: 'Views/Cloud.html',
        controller: 'cloudController'

    }).when('/wind', {
        templateUrl: 'Views/Wind.html',
        controller: 'windController'

    }).when('/city/:cityName', {
        templateUrl: 'Views/City.html',
        controller: 'cityController'

    });
    $locationProvider.html5Mode(true);
}]);

附：我确实放了 .如果我没有链接 1 和 2 将无法正常工作。

编辑：糟糕的是，我没有添加指向这些链接的锚标记。

<ul class="nav navbar-nav navbar-right">
                    <li><a href="#"> Home</a></li>
                    <li><a href="/clouds"> Cloud</a></li>
                    <li><a href="/wind"> Wind</a></li>
                    <li><a href="/city/Tokyo"> CHAT!!!</a></li>
</ul>

Answer 1

您必须将<base href="/" /> 放在标签的最顶部。 它有效，虽然我想知道如何以及为什么！！

致谢：This stackoverflow answer