AngularJS - 如何阻止 <base> 标签 + html5Mode + $location 阻止锚标签链接刷新网页答案

【问题标题】：AngularJS - How to stop <base> tag + html5Mode + $location from preventing anchor tag links to refresh the webpageAngularJS - 如何阻止 <base> 标签 + html5Mode + $location 阻止锚标签链接刷新网页
【发布时间】：2018-03-22 15:41:19
【问题描述】：

这是我的 JS（我将 html5Mode 设置为 True，我正在使用 $http $window 和 $location：

.config(['$locationProvider', function($locationProvider){
    $locationProvider.html5Mode(true); // Important. Needed for URLs.
}])

.controller("MainCtrl", ["$http", "$window", "$location", function($http, $window, $location) {

基础标签也设置好了，像这样：

<base href="/">

这是我的html页面：

<div>
    <ul class="nav nav-pills">
        <li><a href="/">Home &#x25BC;</a></li>
        <li><a href='/post'>Post</a></li>
        <li><a href="/settings">Settings</a></li>
        <li><a href ng-click="ctrl.logoutUser()">Logout</a></li>
    </ul>
</div>

问题是，当我单击任何链接时，URL 会更新，但页面不会刷新。如果我从控制器中删除 $location 则它可以正常工作，但我需要 $location 从我的 JS 中获取 URL 以用于其他目的。有没有办法阻止 AngularJS 阻止刷新网页？

【问题讨论】：

标签： angularjs

【解决方案1】：

一种解决方案是将target='_self' 添加到锚标记中，如下所示：

<li><a href="/" target='_self'>Home &#x25BC;</a></li>

答案取自这篇 SO 帖子：Angularjs Normal Links with html5Mode

【讨论】：

【解决方案2】：

对于那些使用 ui-router 的人，总是尝试使用

ui-sref="stateName.childState"

而不是 href="myurl"，这将防止重新加载问题。

参考： https://github.com/angular-ui/ui-router/wiki/quick-reference#ui-sref

【讨论】：