Question

我试图摆脱我的ui-router网址中出现的＃标签。（http://localhost:3000/email不起作用，但http://localhost:3000/#email有效。经过搜索，我找不到适用于我的案例。我现在在本地跑，所以我假设我不需要任何＆＃34;服务器配置＆＃34;我在index.html中包含＆＃34;＆＃34;

(function(angular) {
    'use strict';
    angular.module('myApp', ['ui.router'])



    .controller('MainController', function($scope, $route, $routeParams, $location) {
        $scope.$route = $route;
        $scope.$location = $location;
        $scope.$routeParams = $routeParams;
    })

    .config([
            ['$stateProvider', '$locationProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider, $locationProvider, $provide) {

                $urlRouterProvider.otherwise('/email');

                // PAGES

                $stateProvider

                    .state('email', {
                    url: '/email',
                    templateUrl: '../pages/email.html',
                    controller: 'EmailController'
                })

                .state('about', {
                    url: '/about',
                    templateUrl: '../pages/about.html',
                    controller: 'AboutController'
                })

                // ... the rest...

                $locationProvider
                    .html5Mode(true); // enable html5Mode for pushstate ('#'-less URLs DOESN'T WORK)
                    .hashPrefix('!');

                $provide.decorator('$sniffer', function($delegate) {
                    $delegate.history = false;
                    return $delegate;
                });

            }]);

Answer 1

您可以在运行块中执行此操作：

$locationProvider.html5Mode({
    enabled: true,
    requireBase: false
});

您的网址将从domain.com/#foo更改为domain.com/foo（这不需要明确的基础）。

...或者在你的跑步栏中这样做：

$locationProvider.html5Mode(true);

...然后将其添加到您的html <head>：

<base href="/">

此解决方案提供与第一个相同的结果，但现在有一个指定的基础。

Answer 2

也许试试这段代码？我认为可能是由于这些原因之一。

配置依赖项未正确设置（乱序）
.hasPrefix（！）在分号后放入。
还需要使用<head>在<base href='/'>标记中指定基本位置（或者可能是'/ email'？）

angular.module（'myApp'，['ui.router']）

.controller('MainController', function ($scope, $route, $routeParams, $location) {
    $scope.$route = $route;
    $scope.$location = $location;
    $scope.$routeParams = $routeParams;
})

.config(function ($stateProvider, $urlRouterProvider, $locationProvider, $provide) {

    $urlRouterProvider.otherwise('/email');

    // PAGES

    $stateProvider

        .state('email', {
            url: '/email',
            templateUrl: '../pages/email.html',
            controller: 'EmailController'
        })

        .state('about', {
            url: '/about',
            templateUrl: '../pages/about.html',
            controller: 'AboutController'
        });

    $locationProvider.html5Mode(true).hashPrefix('!');

    $provide.decorator('$sniffer', function ($delegate) {
        $delegate.history = false;
        return $delegate;
    });

}）;

道歉，我无法让代码示例表现出来。

Answer 3

您是否在HTML文件中设置了与以下相同的基础：

<html>
  <head>
    <base href="/">
  </head>
</html>

您应该在配置中删除.hashPrefix('!');，因此此代码在此处相同：

$stateProvider

    .state('email', {
    url: '/email',
    templateUrl: '../pages/email.html',
    controller: 'EmailController'
})

.state('about', {
    url: '/about',
    templateUrl: '../pages/about.html',
    controller: 'AboutController'
})

// ... the rest...

$locationProvider
    .html5Mode(true); // enable html5Mode for pushstate ('#'-less URLs DOESN'T WORK)

$provide.decorator('$sniffer', function($delegate) {
    $delegate.history = false;
    return $delegate;
});

Answer 4

您的应用配置将如下所示

app.config(function ($routeProvider,$locationProvider) { 
$locationProvider.html5Mode(true);
$routeProvider
    .when("/", {
        templateUrl: 'url',
        controller : 'mainController'
    })
});

在页面标题中使用标记

<base  href="abc.com/"/>

这可能会导致以下href出现问题，无法正确加载页面

<a href="abc.com/about">About Us</a>

要克服此问题，请在锚标记中使用target="_self"，如下所示

<a href="abc.com/about" target="_self">About Us</a>

AngularJS $ locationProvider.html5Mode无法在localhost上运行

4 个答案: