javascript Angular ui-router 向 url 添加哈希
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28768460/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular ui-router adding hash to url
提问by ajmajmajma
I am setting up a scaffold for an app with angular and angular-ui-router. I have it working however it seems to be adding a hash into my url (I'm running dev on localhost) localhost:9000/#/test. When I land on the main page it's just localhost:9000and it still serves the main view content. I would like to get rid of the hash if possible.
我正在为带有 angular 和 angular-ui-router 的应用程序设置脚手架。我让它工作了，但是它似乎在我的 url 中添加了一个哈希（我在本地主机上运行 dev）localhost:9000/#/test。当我登陆主页时，它只是localhost:9000并且它仍然提供主视图内容。如果可能的话，我想摆脱散列。
So here is my setup:
所以这是我的设置：
In my index.html in the body I just have my nav and then the ui-view under that:
在我的 index.html 中，我只有我的导航，然后是它下面的 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>
and in my app.js I just have:
在我的 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'
});
});
So when I land, it's fine, but when I start using the nav I have set up, it adds the hashes to the url, would prefer not to have them if possible. Thanks!
所以当我着陆时，这很好，但是当我开始使用我设置的导航时，它会将哈希添加到 url 中，如果可能的话，我宁愿不使用它们。谢谢！
采纳答案by Callum Linington
Include $locationProviderand do $locationProvider.html5Mode(true);:
包括$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);
});
I also have an otherwisein there as well, so that if it can't find a specified route, it will just default back:
我也在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('/');
});
回答by jeff
Inject $locationProvider into your config and set html5mode to true:
将 $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);
});
Make sure you adjust your .htaccess to handle this (rewriting back to root).
确保你调整你的 .htaccess 来处理这个（重写回 root）。
回答by rchavarria
There is an alternative to html5Mode. But it has its drawbacks.
有一种替代方法html5Mode。但它有它的缺点。
When defining ui-router states, the urloption is not required. From that documentation:
定义 ui-router 状态时，url不需要该选项。从该文档：
You might create some child states without URLs, if it doesn't make sense to bookmark those child states. The state machine transitions between url-less states as usual, but does not update the url when complete. You still get all the other benefits of a state transition such as parameters, resolve, and lifecycle hooks.
如果将这些子状态添加为书签没有意义，您可以创建一些没有 URL 的子状态。状态机像往常一样在无 url 状态之间转换，但在完成时不会更新 url。您仍然可以获得状态转换的所有其他好处，例如参数、解析和生命周期挂钩。
If you don't need to provide a URL for a state so that users can bookmark those states, you can omit the urloption. The URL won't change.
如果不需要提供状态的 URL 以便用户可以为这些状态添加书签，则可以省略该url选项。URL 不会改变。
