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文档：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>

AngularJS：路由提供程序将“/”更改为％2F

4 个答案: