javascript - Angular 路由中的哈希符号

Question

我在 Angular 路由中遇到 # 符号问题。我的导航链接应该没有前导斜杠符号，如下所示:

<li class="active"><a href="/"><i class="fa fa-home" aria-hidden="true"></i></a></li>
<li><a href="#services"> УСЛУГИ</a></li>

否则滚动 spy 将无法工作(如果我使用 <a href="#/services"> )。
但现在以这种方式配置的 Angular 路由存在问题:

config(["$routeProvider", function ($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: '/templates/home.html',
                controller: 'smu72Controller'
            })
            .when('/objects', {
                templateUrl: '/templates/objects.html',
                controller: 'smu72Controller'
            })
            .when('/object/:Id', {
                templateUrl: '/templates/object.html',
                controller: 'smu72Controller'
            })
        .otherwise({
            redirectTo: "/"
        });

我应该如何更改路由(或滚动 spy )配置才能将这些导航链接用于两个目的 - 滚动 spy 和 Angular 路由？

Answer 1

您可以使用 $locationProvider 模块摆脱 # 登录路由

config(["$routeProvider", "$locationProvider", function ($routeProvider, $locationProvider) {
    $routeProvider
        .when('/', {
            templateUrl: '/templates/home.html',
            controller: 'smu72Controller'
        })
        .when('/objects', {
            templateUrl: '/templates/objects.html',
            controller: 'smu72Controller'
        })
        .when('/object/:Id', {
            templateUrl: '/templates/object.html',
            controller: 'smu72Controller'
        })
        .otherwise({
            redirectTo: "/"
        });

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