Angular UI-Router 如何给 URL 添加哈希值

Question

我正在使用angular和angular-ui-router为应用程序设置一个脚手架。我已经做好了，但是它似乎在我的URL中添加了一个哈希（我在本地主机上运行dev）localhost:9000/#/test。当我着陆在主页面上时，它只是localhost:9000，它仍然服务于主视图内容。如果可能的话，我想摆脱这个哈希。所以这是我的设置：在我的index.html中，在body下面只有我的导航，然后是ui-view：

 <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>

在我的app.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中添加井号（#），如果可能的话，希望不要有它们。谢谢！

- ajmajmajma

---

检查$locationProvider的html5Mode([mode]) - https://docs.angularjs.org/api/ng/provider/$locationProvider - Radim Köhler

包括 $locationProvider 并执行 $locationProvider.html5Mode(true);。 - Callum Linington

Answer 1

包含$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('/');
    });

- Callum Linington

---

如果您遇到其他问题和需要存在标签的错误，请查看此文档：：https://docs.angularjs.org/error/$location/nobase - beauXjames

或者 $locationProvider.html5Mode({ enabled: true, requireBase: false }); - jarmod

Answer 2

将 $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文件以处理此问题（将其重写回根目录）。

- jeff

---

关于服务器端重写的更多详细信息请参考https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode。 - jarmod

Answer 3

有一种替代方案可以用于html5Mode，但它也有其缺点。

在定义ui-router状态时，url选项是不必要的。从文档中可以看到：

如果没有必要将子状态添加到书签中，您可能会创建一些没有URL的子状态。状态机像往常一样在无URL状态间转换，但完成后不会更新URL。您仍然会获得所有其他状态转换的好处，例如参数、解决和生命周期钩子。

如果您不需要为状态提供URL来让用户将这些状态加入书签，那么可以省略url选项。URL不会改变。

- rchavarria