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

希望这个能帮到你。

在你的配置中包含$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

我也有同样的问题，在添加locationProvider后工作，就像下面

myApp.config(["$routeProvider","$locationProvider", function ($routeProvider,$locationProvider) {
    $routeProvider
        .when("/home", {
            templateUrl: "Templates/home.html"
        })
        .when("/class", {
            templateUrl: "Templates/class.html"
        }).otherwise({
        redirectTo: "/class"
    });
    $locationProvider.hashPrefix('');
}]);

HTML

 <ul>
        <li>
            <a href="#/home">Home</a>
        </li>
        <li>
            <a href="#/class">Class</a>
        </li>
</ul>

Answer 3

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

Api Docs: https://docs.angularjs.org/api/ng/provider/$locationProvider

Answer 4

我遇到过同样的问题。删除"#"对我有用。你可以这样写:<a asp-controller="Contact" asp-action="Details" ng-href="/details/{{contact.firstName}}" >{{ contact.firstName}}</a>