路由“#”问题仍然发生

Question

我已添加到我的 index.html 我已将 $locationProvider 添加到我的 app.js

当我点击我的按钮时，它现在正确地路由我localhost:20498/register。但是，每当我输入 localhost:20498/register 时，我仍然会得到 400，当我将 url 更改为 localhost:20498/#/register 时，我会正确地路由到页面。我该如何解决这个问题？

我的 app.js：

var adminPortal = angular.module("adminPortal", [
"ui.router",
'isteven-multi-select',
"ui.bootstrap",
'ngAnimate',
'ui.mask',

]);

adminPortal.config(["$stateProvider", "$urlRouterProvider","$locationProvider", function ($stateProvider, $urlRouterProvider,$locationProvider) {

$urlRouterProvider.when("", "/home");

$stateProvider
    .state("home", {
        url: "/",
        templateUrl: "js/views/home.html",
        controller: "HomeController"
    })
    .state("register", {
        url: "/register",
        templateUrl: "js/views/register.html",
        controller: "RegisterController"
    })
    .state("user", {
        url: "/user",
        abstract: true,
        templateUrl: "js/views/user.html",
        controller: "UserController"
    })
    .state("user.settings", {
        url: "/settings",
        templateUrl: "js/views/user.settings.html",
        controller: "UserSettingsController"
    })
    .state("tracking", {
        url: "/tracking",
        abstract: true,
        templateUrl: "js/views/tracking.html",
        controller: "TrackingController"
    })
    .state("tracking.fullMap", {
        url: "/fullMap",

        templateUrl: "js/views/tracking.fullMap.html",
        controller: "TrackingFullMapController"
    })
    .state("dispatchOrder", {
        url: "/dispatchOrder",
        abstract: true,
        templateUrl: "js/views/dispatchOrder.html",
        controller: "DispatchOrderController"
    })
    .state("dispatchOrder.edit", {
        url: "/edit/:orderId",

        templateUrl: "js/views/dispatchOrder.edit.html",
        controller: "DispatchOrderEditController"
    })
    .state("dispatchOrder.search", {
        url: "/search",

        templateUrl: "js/views/dispatchOrder.search.html",
        controller: "DispatchOrderSearchController"
    })
    .state("dispatchOrder.tile", {
        url: "/searchTile",

        templateUrl: "js/views/dispatchOrder.search.tile.html",
        controller: "DispatchOrderSearchController"
    })
    .state("dispatchOrder.archive", {
        url: "/archive",

        templateUrl: "js/views/dispatchOrder.search.html",
        controller: "DispatchOrderSearchController"
    })
    .state("dispatchOrder.available", {
        url: "/available",

        templateUrl: "js/views/dispatchOrder.search.html",
        controller: "DispatchOrderSearchController"
    })
    .state("dispatchOrder.queue", {
        url: "/queue",

        templateUrl: "js/views/dispatchOrder.search.html",
        controller: "DispatchOrderSearchController"
    })
    .state("hauler", {
        url: "/hauler",
        abstract: true,
        templateUrl: "js/views/hauler.html",
        controller: "HaulerController"
    })
    .state("hauler.edit", {
        url: "/edit/:haulerId",

        templateUrl: "js/views/hauler.edit.html",
        controller: "HaulerEditController"
    })
    .state("hauler.search", {
        url: "/search",

        templateUrl: "js/views/hauler.search.html",
        controller: "HaulerSearchController"
    })
    .state("broker", {
        url: "/broker",
        abstract: true,
        templateUrl: "js/views/broker.html",
        controller: "BrokerController"
    })
    .state("broker.edit", {
        url: "/edit/:brokerId",

        templateUrl: "js/views/broker.edit.html",
        controller: "BrokerEditController"
    })
    .state("broker.search", {
        url: "/search",

        templateUrl: "js/views/broker.search.html",
        controller: "BrokerSearchController"
    });

$locationProvider.html5Mode(true);

}])

请帮忙！

Answer 1

设置$locationProvider.html5Mode(true);。也适用于 index.html 中的相对链接集 <base href="/">。 尝试阅读官方关于位置doc。