Angular ui路由器向url添加哈希

Angular ui-router adding hash to url

本文关键字：添加 哈希 url ui 路由器 Angular      更新时间：2024-07-01

我正在为一个带有angular和angular ui路由器的应用程序设置脚手架。我已经工作了，但它似乎在我的url中添加了一个散列（我在localhost上运行dev）localhost:9000/#/test。当我登录主页时，它只是localhost:9000，并且它仍然提供主视图内容。如果可能的话，我想去掉这个杂碎。

这是我的设置：

在我的index.html中，我只有我的导航，然后是下面的ui视图：

 <div class="row">
   <ul class="nav navbar-nav">
      <li><a ui-sref="index">Home</a></li>
      <li><a ui-sref="test">Test</a></li>
    </ul>
  </div>
  <div ui-view=""></div>

在我的应用程序.js中，我只有：

angular
.module('playApp', [
'ui.router'
])
.config(function($stateProvider) {
$stateProvider
.state('index', {
    url: '',
    templateUrl: 'views/main.html',
    controller: 'MainCtrl'
})
.state('test', {
    url: '/test',
    templateUrl: 'views/test.html',
    controller: 'testCtrl'
});
});

所以当我着陆时，这很好，但当我开始使用我设置的导航时，它会将哈希添加到url中，如果可能的话，我宁愿不使用它们。谢谢

包括$locationProvider并执行$locationProvider.html5Mode(true);:

angular.module('playApp', ['ui.router'])
    .config(function($stateProvider, $locationProvider) {
        $stateProvider.state('index', {
            url: '',
            templateUrl: 'views/main.html',
            controller: 'MainCtrl'
        })
       .state('test', {
            url: '/test',
            templateUrl: 'views/test.html',
            controller: 'testCtrl'
        });
        $locationProvider.html5Mode(true);
    });

我也有一个otherwise，所以如果它找不到指定的路线，它将默认返回：

angular.module('playApp', ['ui.router'])
    .config(function($stateProvider, $locationProvider, $urlRouterProvider) {
        $stateProvider.state('index', {
            url: '',
            templateUrl: 'views/main.html',
            controller: 'MainCtrl'
        })
       .state('test', {
            url: '/test',
            templateUrl: 'views/test.html',
            controller: 'testCtrl'
        });
        $locationProvider.html5Mode(true);
        $urlRouterProvider.otherwise('/');
    });

将$locationProvider注入您的配置并将html5mode设置为true:

angular.module('playApp', [
    'ui.router'
])
.config(function($stateProvider, $locationProvider ) {
    $stateProvider
        .state('index', {
            url: '',
            templateUrl: 'views/main.html',
            controller: 'MainCtrl'
        })
        .state('test', {
            url: '/test',
            templateUrl: 'views/test.html',
            controller: 'testCtrl'
        });
    $locationProvider.html5Mode(true);
});

请确保调整.htaccess以处理此问题（重写回root）。

有一种html5Mode的替代方案。但它也有缺点。

在定义ui路由器状态时，不需要url选项。根据该文件：

您可能会创建一些没有URL的子状态，如果将这些子状态添加为书签是没有意义的。状态机像往常一样在无url的状态之间转换，但完成后不会更新url。您仍然可以获得状态转换的所有其他好处，如参数、解析和生命周期挂钩。

如果不需要提供状态的URL以便用户可以为这些状态添加书签，则可以省略url选项。URL不会更改。

相关文章：