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且错误发生在那里，所以它们中的任何一个似乎都不起作用。

谢谢

Rafael

- Rafael Munoz

---

你读过这个问题吗？https://dev59.com/SGAf5IYBdhLWcg3wSRHi - MMhunter

它将在没有哈希的情况下工作。 - tsadkan yitbarek

@MMhunter：是的，我看过了，并且在我的解决方案中尝试了它，但它没有起作用。 - Rafael Munoz

@tsadkanyitbarek：无论是否使用 #，它都不起作用。我已经尝试了这两种解决方案，但都没有成功。 - Rafael Munoz

@RafaelMunoz，您可以在后端代码中解码URL参数或整个URL。使用HttpUtility.UrlEncode("URL")。 - PTank

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"

                        });


    });

- Himanshu Shekhar

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>

- Robin Mathur

Answer 3

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

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

- Sebastian Sebald

---

谢谢您的帮助，我已经阅读了链接并在HTML5部分中添加了rewriteLinks：true，它可以工作，但有一个小问题： 我着陆在正确的URL上，它正确显示视图，但如果我刷新页面，它就会消失->变成空白页 :-( - Rafael Munoz

听起来你需要正确配置你的服务器。这似乎不是Angular的问题。另外，“空白页面”并不是真正的堆栈跟踪 ;) - Sebastian Sebald

我正在本地计算机（localhost）上进行开发工作。无论如何，感谢您的帮助，至少我在两天后有所进展了。来自邻近卡尔斯鲁厄的问候。 - Rafael Munoz

即使您使用“localhost”，您也有一个本地服务器可以配置！也向您问候 :) - Sebastian Sebald

Answer 4

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

- Clarence