AngularJS：路由提供程序将“/”更改为 %2F [重复]答案

【问题标题】：AngularJS: route provider changes "/" into %2F [duplicate]AngularJS：路由提供程序将“/”更改为 %2F [重复]
【发布时间】：2016-12-19 04:43:20
【问题描述】：

我正在构建一个 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 到达浏览器之前我无法访问它并且错误就在那里。

谢谢

拉斐尔

【问题讨论】：

你读过这个stackoverflow.com/questions/24814472/…吗？
它可以在没有哈希的情况下工作
@MMhunter：是的，我读过它，并在我的解决方案中尝试过，但没有奏效。
@tsadkanyitbarek: 不管有没有它都不起作用#我测试了这两种解决方案都没有成功
@RafaelMunoz 您可以在后端代码中解码 URL 或整个 URL 的参数。使用 HttpUtility.UrlEncode("URL") 。

标签： javascript asp.net angularjs routing

【解决方案1】：

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

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

【讨论】：

感谢您的帮助，我已阅读链接并将 rewriteLinks: true 添加到 HTML5 部分，它可以工作，但有一个小问题：我进入了正确的 URL，它正确显示了视图，但是如果我刷新页面，它就全部消失了->空白页面：-(
听起来您需要正确配置服务器。这似乎不是 Angular 的问题。另外，“空白页”并不是真正的堆栈跟踪；）
我在我的计算机 (localhost) 上本地工作，但仍处于开发阶段。无论如何，感谢您的帮助，至少我在两天后继续前进。来自邻近卡尔斯鲁厄的问候
好吧，即使您使用“localhost”，您也有一个可以配置的本地服务器！也向你问好:)

【解决方案2】：

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

【讨论】：

【解决方案3】：

希望这篇文章对你有所帮助。

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

                        });


    });

【讨论】：

【解决方案4】：

我遇到了同样的问题，在添加 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>

【讨论】：