AngularJS:路由提供程序将"/"更改为%2F

Question

我正在构建一个AngularJS应用程序,在构建第二个视图时我遇到了URL问题:

我的appContact.js看起来像这样:

(function () {

    "use strict";

    var app = angular.module("appContacts", ["simpleControls", "ngRoute"])
        .config(function ($routeProvider, $locationProvider) {

            $routeProvider.when("/", {
                controller: "contactsController",
                controllerAs: "vm",
                templateUrl: "/views/contactsView.html"
            });

            $routeProvider.when("/details/:firstName", {
                controller: "contactsDetailsController",
                controllerAs: "vm",
                templateUrl: "/views/detailsView.html"
            });

            $routeProvider.otherwise({ redirectTo: "/"});

            $locationProvider.html5Mode({
                enabled: true,
                requireBase: false
            });

        });
})();

在我的HTML中,我有这个链接:

<a asp-controller="Contact" asp-action="Details" ng-href="#/details/{{contact.firstName}}" >{{ contact.firstName}}</a>

当我在浏览器中悬停时,我有正确的建议链接,如:

 **http://localhost:8000/#/details/Matthew**

但是,当我单击链接导航到新页面时,URL将更改为

 **http://localhost:8000/#%2Fdetails%2FMatthew** 

通过%2更改"/"会使应用程序失败并显示空白页面.

你知道为什么会这样,以及如何纠正这个问题？

我已经阅读了类似的帖子,但是它们似乎都没有用,因为我在访问编码器的URL到达浏览器之前没有访问它并且错误就在那里.

谢谢

拉斐尔

Answer 1

愿这一个会帮助你.

include $ locationProvider.hashPrefix(''); 在你的配置中.

           Example.
         <div>
            <a href ="#/table">table</a>
            <a href ="#/addPage">addForm</a>
        </div>

        app.config(function($routeProvider, $locationProvider) {
            $locationProvider.hashPrefix('');
         $routeProvider.when("/addPage", {

                           templateUrl :"partials/add.html",
                           controller : "ngRepeatTableCtrl"

                         })
                      .when("/tablePage", {

                           templateUrl :"partials/table.html",
                           controller : "ngRepeatTableCtrl"
                     })
                      .otherwise({
                             templateUrl :"partials/table.html",
                             controller : "ngRepeatTableCtrl"

                        });


    });

Answer 2

您启用了 HTML5Mode，这意味着 Angular 尝试我们history.pushState而不是使用哈希来进行路由。猜测您的服务器不支持pushState或该选项未启用？

Api 文档：https : //docs.angularjs.org/api/ng/provider/$locationProvider