AngularJS自动添加斜杠前缀。

Question

如果我访问这个url： www.xyz.com/home#route-1 AngularJS会自动将其重定向到： www.xyz.com/home#/route-1 也就是说，它在路由前加上了一个斜杠/。

为什么会这样？如何停止这种行为呢？ 更新：实际上，我希望 AngularJS 既不添加斜杠，也不移除井号。

- tusharmath

---

你找到解决方案了吗？ - Maen

@Bigood，请查看下面的答案。 - tusharmath

你说过你不想 "移除井号", 但是这里提供的解决方案在我的情况下会将其移除；这就是为什么我问你的原因。 - Maen

Answer 1

@Tushar，我不确定你是否已经找到解决方案，但我也遇到了类似的情况，在谷歌上搜索也没有什么结果。最终，我发现这只是一个非常简单的修复方法，我添加了：-

angular.config(function($locationProvider) {
    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false,
        rewriteLinks: false
    });
})

现在它不再在我的哈希锚点前添加斜杠(/)前缀。一切都像我们熟悉的那样（不会用哈希或其他方式替换URL）。

- stephen

---

这是一个问题，当我刷新页面时，它会显示“Object not found!”页面。有没有解决办法？ - Chintan Mathukiya

Answer 2

如果你想在你的AngularJS应用程序中使用锚点，你应该使用$anchorScroll服务。

"controller"

function ScrollCtrl($scope, $location, $anchorScroll) {
  $scope.gotoBottom = function (){
    // set the location.hash to the id of
    // the element you wish to scroll to.
    $location.hash('bottom');

    // call $anchorScroll()
    $anchorScroll();
  }
}

"html"

<div id="scrollArea" ng-controller="ScrollCtrl">
  <a ng-click="gotoBottom()">Go to bottom</a>
  <a id="bottom"></a> You're at the bottom!
</div>

您可以在AngularJS文档中看到这个工作原理。

如果您想要美化AngularJS的URL，您可以启用html5Mode：

.config(function($routeProvider, $locationProvider) {

    $routeProvider
        .when('/', {
            templateUrl : 'partials/home.html',
            controller : mainController
        })
        .when('/about', {
            templateUrl : 'partials/about.html',
            controller : mainController
        })
        .when('/contact', {
            templateUrl : 'partials/contact.html',
            controller : mainController
        });

    // use the HTML5 History API
    $locationProvider.html5Mode(true);
});

您可以在这里查看更多信息

- NEOLPAR

---

不，我与页面滚动无关。只是简单的路由出了问题。 - tusharmath

但这是AngularJS路由的正常功能。我以为你遇到了锚点问题。在我的情况下，我有一个带有AngularJS应用程序的index.html文件，我可以从http://localhost:9768/index.html#/login和http://localhost:9768/#/login进入它。 - NEOLPAR

你可以使用html5Mode来美化路由，我编辑了这篇文章。 - NEOLPAR

有没有办法覆盖这种行为？ - tusharmath

是的，您可以使用html5Mode来美化路由，这是覆盖它的方法。然后路由将会变成www.xyz.com/route-1。`$locationProvider.html5Mode(true);` - NEOLPAR

但我想保留#符号。我的意思是它不应该将/home#route转换为/home#/route。 - tusharmath